How to Design a Custom Theme

Yaogang Lian edited this page Nov 18, 2016 · 12 revisions

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.

Screen Shot 2015-12-13 at 8.33.42 AM.png

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.

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

Default Code Cell Theme (Ace)

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.