How to Design a Custom Theme
The easiest way to design a custom theme is to start with an existing theme. Pick a theme that's close to what you want, duplicate it (Preferences > Themes > Duplicate Theme), then edit the new theme.
A theme file is just a JSON file with color settings and CSS settings. As you change color settings in the theme file, the app updates its UI in real time.
Most of the fields in the theme file are self-explanatory. But it's important to understand that there are two types of settings.
Quiver is a native OS X app, but the editor/preview/presentation are webviews. So in the theme file, you can change color settings for most native UI elements (window, sidebar, note list, toolbars), but you should use CSS for editor/preview/presentation.
You can find CSS settings near the end of the theme file:
"css": {
"className": "spacegray",
"editor": ".spacegray{color:#ddd}.spacegray a{color:#fff}.spacegray table tr:nth-child(even){background-color:#434a58}.spacegray table th{background:#2b3137}.spacegray table td,.spacegray table th{border-color:#576071}.spacegray blockquote{color:#fff}.spacegray hr{background-color:#576071}.spacegray code{background-color:rgba(255,255,255,.1)}.spacegray svg{background-color:#fff}.spacegray .text-cell [style]{color:#ccc!important;background-color:transparent!important}.spacegray .diagram-cell .ace_editor,.spacegray .latex-cell .ace_editor,.spacegray .markdown-cell .ace_editor{color:#c7c7c7;background-color:#393f4b}.spacegray .markdown-cell .ace_list{color:#c7c7c7}.spacegray .cell.inEditMode{border-color:#576071;}",
"preview": ".spacegray{color:#ddd}.spacegray a{color:#fff}.spacegray table tr:nth-child(even){background-color:#434a58}.spacegray table th{background:#2b3137}.spacegray table td,.spacegray table th{border-color:#576071}.spacegray blockquote{color:#fff}.spacegray hr{background-color:#576071}.spacegray code{background-color:rgba(255,255,255,.1)}.spacegray svg{background-color:#fff}.spacegray .text-cell [style]{color:#c7c7c7!important;background-color:transparent!important}.spacegray #tag-field{margin:8px 2px;}.spacegray #tag-field .tag{background:#576071;border-radius:2px;color:#ccc;}",
"presentation": ".spacegray{color:#ddd}.spacegray a{color:#fff}.spacegray table tr:nth-child(even){background-color:#434a58}.spacegray table th{background:#2b3137}.spacegray table td,.spacegray table th{border-color:#576071}.spacegray blockquote{color:#fff}.spacegray hr{background-color:#576071}.spacegray code{background-color:rgba(255,255,255,.1)}.spacegray svg{background-color:#fff}.spacegray .text-cell [style]{color:#c7c7c7!important;background-color:transparent!important}"
}Note that a special css className can be set for a theme, and your css rules should use that className, as in the above example.
When you design a theme, it would be easier to test out your css settings in Preferences > Styles > Edit CSS. When you are satisfied with your css settings, minify the css settings, and paste it into the theme file as a single string.
If you need to inspect HTML elements and class names in the editor/preview/presentation, you can turn on the webview inspector: http://stackoverflow.com/questions/695038/is-there-a-way-to-use-the-webkit-web-inspector-from-a-cocoa-webview-object
It's also important to understand the difference between an app theme and a code cell theme. The app theme is the theme json file that customizes the whole UI, and the code cell theme is a theme for the Ace code editor.
When you design an app theme, you might want to set a default code cell theme that can match your design. You can do it in this part of the theme JSON file (just above the css settings);
"editor": {
"codeCellTheme": "tomorrow_night_eighties",
"markdownCellTheme": "tomorrow_night_eighties"
}It's important to set the theme names right. You can find all the Ace theme names here: https://github.com/HappenApps/Quiver/wiki/Code-Cell-Themes