4. Theme Customization

4.1. Overview

Starting from version 2.0, SnippetsLab allows you to customize all the pre-configured themes, or create new ones from existing templates. You can change not only the syntax coloring, but almost every aspect of the application interface as well.

shadow

4.2. Theme List

In Theme Preferences, the left column shows a list of currently installed themes. You can click on a theme to switch to it, or click on the gearshape.fill button below to reveal the more options menu, where you can rename, duplicate, or remove a theme. In the event that you want to reset everything, choose Reset All….

If the theme Mode is set to Sync with system, the theme list will also helpfully indicate whether a particular theme is set to go with the light or dark system appearance. This setting will be enforced the next time system appearance changes, or when the app restarts. To assign a new preferred light or dark theme, choose Set As Light/Dark Theme from the more options menu.

You can export any theme to a JSON file with the Export Theme… option, which can be imported back to SnippetsLab later on. You can use this feature to backup your own themes, or share them with someone else.

When a theme has been edited, its name will be shown in a bold typeface.

By default, SnippetsLab will apply a transition effect when switching themes. If you would like to disable this animation temporarily (such as to make it easier to compare two similar-looking themes), hold the Option key.

Tip

Choosing Reset All… will not only reset all pre-configured themes but also remove all custom themes. If there are certain themes that you want to keep, make sure to export them before performing a reset.

If you want to restore a particular theme to its initial setting, the best way is to choose New Theme From Template, in which case a copy of the original theme will be added.

4.3. Customizing Syntax Colors

In SnippetsLab, syntax types (sometimes also known as lexical classes) are structured hierarchically. For example, Name is considered a top-level type, containing sub-types such as Name.Attribute, Name.Class, Name.Function and Name.Variable. The type Name.Variable, in turn, also includes its own sub-types, such as Name.Variable.Class, Name.Variable.Instance and so on. This is consistent with Pygments—the syntax highlighting engine that SnippetsLab uses under the hood. For more details, see Builtin Tokens — Pygments.

In the theme editor, they are arranged in a similar fashion, where you can expand a type to reveal its sub-types.

You will notice that there is an Use column with a checkbox next to every type. When this checkbox is enabled, the code editor will use the associated color for the corresponding type. The same color will also recursively apply to all sub-level types who do not have a color specified.

For any top-level types that do not have a color setting, it will fall back to the Plain Text color.

Note

Languages usually do not make use of all the possible syntax types. They only employ a subset of these types that makes sense to the particular language in question.

The app will instantly reflect any change that you make. Changes made to the current theme will be automatically saved when switching to another, or when the theme window is closed. If you would like to undo your changes since the last save, click on the Discard Changes… button.

4.4. Customizing App Colors

To reveal more customization options of the app interface, click on the Advanced… button.

In SnippetsLab, most of the interface elements have the ability to derive their colors based on the background color. This makes it easy to make general customizations without having to worry about every single detail, as they will adapt automatically.

Any changes that you make in the Advanced section will be reflected in the app instantly. At any time, however, you can click on the Discard Changes… button to undo all changes made in the Advanced section. Unsaved changes made before opening the Advanced window, if any, will not be affected.

shadow

4.4.1. Background colors and theme styles

You set the app-wide background color in General > Background. You can also specify a different color for the sidebar, snippets list, and editor panes by overriding the background color located within their respective tab.

There are two theme styles: Light and Dark. The theme style determines the appearance of texts and icons (and in some cases, windows and menus as well). Most of the time, the app can automatically determine the appropriate style based on the background color. If this does not work as expected (for example, when you are expecting dark text while the app is showing light text), specify a style manually.

4.4.2. Support for wallpaper tinting

Apple introduced the Wallpaper Tinting effect in macOS Mojave that, when enabled, will dynamically adjust the window colors to show a slight hint of the wallpaper color behind the window. By default, only the Mojave Dark theme supports this feature. This is because the app must use the default window background color—without customizations—in order to obtain this effect.

In theory, you can configure any theme, light or dark, to have this effect. To do so, you need to choose a dynamic color called windowBackgroundColor as the app background color, and then enable Enable macOS wallpaper tinting support from the Options tab in advanced settings. The section below explains the dynamic colors in detail.

4.4.3. Developer colors

In macOS, there are a few user-customizable colors that can be changed in System Preferences > General. Some prime examples include accent color and highlight color. Most of the pre-configured themes in SnippetsLab will respect these settings by way of using special developer colors, instead of fixed (or sometimes called hard-coded) colors for interface elements like emphasize, link, and text selection.

Just like regular colors, these developer colors are available in the color panel as well. To find them, select the third tab on the top (the “Color Palettes” tab), then choose Developer from the dropdown menu.

shadow

Unlike regular colors, many colors listed under Developer are dynamic and may resolve to different colors based on a variety of system settings. The most commonly used ones are the accent color (listed as controlAccentColor), and the highlight color (listed as selectedTextBackgroundColor).

Warning

It is recommended to use a regular, static color whenever possible, and use developer colors only if necessary. This is not only because these colors may change in a way that is not expected by the user, but also due to their dynamic nature; it is not guaranteed that SnippetsLab will support all developer colors, for the current and future releases of macOS.