nvALT Gets Themeable

nvALT can be dressed up with themes now. The editor takes a MultiMarkdown Composer-compatible theme, the preview takes a Marked stylesheet (which is just CSS, any will work), and the notes list and window colors can be styled, too.

I’m just having fun with this. For truly customizable theming, you’re going to want MultiMarkdown Composer or nvUltra. I’m not trying to steal thunder from either app (even though I am, a little).

Pick one in Settings

Open Settings → Fonts & Colors. There are two menus now, one for the editor and one for the preview, plus Import… and Open Themes Folder.

Default is the nvALT you already have: the color scheme you set in that same pane, and the preview from template.html / custom.css. Choose a named theme when you want the file to take over.

Everything lives in one folder:

~/Library/Application Support/nvALT/Themes

Drop a file in there, or use Import… and pick a few. .theme, .plist, and .json show up as editor themes. .css shows up as a preview theme. The first time you open themes, a sample pair called Paper is copied in. It is not selected for you.

Composer themes, as-is

An editor theme is a MultiMarkdown Composer-compatible theme. The .theme files Composer writes are JSON, with the same keys you would see in a property list. nvALT also reads a real XML or binary plist, and a .json file that uses those keys. Export a theme from Composer, or copy one out of its themes folder, and import it. No conversion step.

Svelte, one of my own and my personal favorite, is a good one to steal as an example. The window and the notes list sit on a blue-gray, and the note itself is a little darker:

"backgroundColor" : "#434c5f",
"foregroundColor" : "#e5e9f0",

"tableViewHighlighted" : {
    "backgroundColor" : "#8ebcbb"
},

"textView" : {
    "backgroundColor" : "#3b4253",
    "foregroundColor" : "#e5e9f0",
    "caretColor" : "#86c0d1"
}

textView paints the note: background, text, caret, selection. The notes list uses tableView, tableViewHighlighted, and tableViewInactive when those exist, and falls back to the window colors when they do not. Syntax is a dictionary per element. heading, strong, emphasis, codeBlock, codeSpan, blockquote, markup, linkParens, and the rest of the Composer set are all fair game. A heading level can sit on top of the base heading style.

Each style can set foregroundColor, backgroundColor, markupForegroundColor, bold, italic, strikethrough, and mono. Colors are #RGB, #RRGGBB, or #RRGGBBAA when you want the selection or a highlight to be translucent. fontScale is in the Composer format and changes the type size in Composer and nvUltra. nvALT currently ignores it, so the editor stays at the size you set in Fonts & Colors.

Those colors stay on screen. They are not written back into the note, so switching to Default (or to another theme) does not bake the last palette into the file.

Editing a theme

Open the .theme file in any text editor. It is plain JSON. Change a hex color, save, and nvALT picks it up from the themes folder.

"heading1" : {
    "foregroundColor" : "#eccc87"
}

The whole Svelte theme is in the repo: Svelte.theme. This link installs it:

Install Svelte

Marked stylesheets for the preview

Preview themes are just CSS. When one is selected, the note is rendered inside <div id="wrapper">, which is the same hook Marked uses. A Marked theme can be dropped in and used directly. Style #wrapper, or style h1, p, pre, and the rest of the elements inside it. Rules on body still paint the page around the note.

A preview theme replaces template.html and custom.css for that preview. Those files are still there for Default, and they are still the right place for a custom template with your own JavaScript. A theme is the simpler path: one stylesheet, no template.

Here is the shape of a small preview theme:

body {
    margin: 0;
    background: #f4f1ea;
}

#wrapper {
    max-width: 42em;
    margin: 0 auto;
    padding: 2.4em 2.2em 4em;
    font: 18px/1.55 Palatino, Georgia, serif;
}

#wrapper h1 {
    font-family: "Avenir Next", Helvetica, sans-serif;
}

Two ready-made ones:

• GitHub.css is the GitHub-style sheet Fletcher and I use. Install it.
• Resolute.css is heavier. The fonts are embedded in the file, so it is a large download and a very finished page. Install it.

Raw copies, if you would rather save the file yourself:

https://raw.githubusercontent.com/ttscoff/nv/master/examples/Svelte.theme
https://raw.githubusercontent.com/ttscoff/nv/master/examples/GitHub.css
https://raw.githubusercontent.com/ttscoff/nv/master/examples/Resolute.css

Install from a link

nvalt:// and nv:// both accept a theme. The host is add-theme (or import-theme). Percent-encode the url value. A local file works the same way:

nvalt://add-theme?url=https%3A%2F%2Fraw.githubusercontent.com%2Fttscoff%2Fnv%2Fmaster%2Fexamples%2FSvelte.theme
nv://add-theme?path=/Users/me/Desktop/GitHub.css

The file is copied into the themes folder and selected. url can be file, http, or https. path is a filesystem path, and a ~ in it is expanded.

Roadmap

nvALT is now a completely customizable, useful, and fairly future-proof product. I would love to see some more donations coming in for it, but I’m going to return to nvUltra now and try to do things I can actually get paid for.