6. Theme Customization

Themes let you customize syntax highlighting and the appearance of the interface. You can customize the built-in themes or create new ones from templates. For Markdown preview themes, see Preview Themes.

6.1. Theme List

Themes are listed in Settings > Theme. Custom themes, including built-in themes that you have edited, are shown in bold.

• To set light and dark themes: By default, the theme mode is Use System Setting, and SnippetsLab switches between a light and a dark theme with the system appearance. Selecting a theme sets it for the current appearance. Alternatively, click the button and choose Set as Light/Dark Theme. To use one theme for both appearances, click the pop-up menu next to the button and choose Single Theme.

• To restore a built-in theme: To get the original version of a built-in theme you have changed, click the button and choose the theme from New Theme from Template. This adds a new copy of the original theme.

• To import or export a theme: Click the button and choose Import Theme or Export Theme. Export a theme to back it up or share it.

• To reset all themes: Click the button and choose Reset All. This also deletes your custom themes, so export any theme you want to keep first.

To compare two similar themes, press and hold Option while switching themes to skip the transition animation.

6.2. Syntax Colors

When SnippetsLab highlights code, it splits the code into small tokens, such as keywords, names, strings, and comments, and gives each token a syntax type. Each theme defines a color for each syntax type. For example, in this Python code:

def greet(name):
    # Say hello
    return "Hello, " + name

the tokens have these syntax types:

Code	Syntax type
def, return	Keyword
greet	Name.Function
name	Name
# Say hello	Comment.Single
"Hello, "	String.Double
+	Operator

Syntax types are organized from general to specific, like folders and subfolders. A top-level type such as Name covers all names in the code. Its subtypes cover specific kinds of names, such as Name.Function for function names and Name.Class for class names. Some subtypes have subtypes of their own, such as Name.Builtin.Pseudo for special names like self in Python. In the theme editor, expand a type to see its subtypes. Each row shows the last part of the name, such as Function for Name.Function.

A subtype inherits the color of its parent type unless assigned its own color. You can set broad colors for parent types first, then refine individual subtypes as needed. For example, if Name is blue and Name.Function has no color of its own, function names are also blue. To give Name.Function its own color, select its checkbox and choose a color. To use the parent’s color again, deselect the checkbox. A top-level type without a color is shown in the plain text color.

Most languages use only some of the syntax types, so changing the color of a type may have no visible effect on a given snippet. For a description of every syntax type, see Builtin Tokens in the Pygments documentation.

Changes appear right away and are saved when you switch to another theme. To undo the changes since the last save, click Discard Changes.

6.3. App Colors

To customize the app interface, click Advanced. Interface colors left unset are calculated from related colors. For example, the sidebar and the snippets list use the app background color, and dividers, selection highlights, and fragment tabs use lighter or darker shades of the colors around them. Changing the background color automatically updates most of the interface, so you only need to customize specific elements. To undo the changes made in the Advanced window, click Discard Changes. This doesn’t affect any changes made outside the Advanced window.

6.3.1. Background Color and Theme Style

To set the app-wide background color, click General and set Background. To override it for the sidebar and the snippets list, click Main Window. To override it for the editor, click Editor. The sidebar background applies only when Use translucent sidebar is unselected in the Options pane.

The theme style (Light or Dark) determines the appearance of text and icons, and in some cases windows and menus. By default, SnippetsLab chooses the style automatically based on the background color. You can also choose Light or Dark manually.

6.3.2. Wallpaper Tinting

Wallpaper tinting adjusts window colors slightly to match the desktop wallpaper. By default, only the Mojave Dark theme supports this feature. To use it in another theme:

1. Set the app background color to the dynamic color controlBackgroundColor.

2. In the Options pane of the Advanced window, select Allow wallpaper tinting.

6.3.3. Developer Colors

In some built-in themes, the accent color and text selection color match the ones set in System Settings > Appearance. These themes use dynamic developer colors. To find them, open the Colors window, click Color Palettes, and choose Developer from the pop-up menu.

The most common ones are the accent color (controlAccentColor) and the text selection color (selectedTextBackgroundColor). Developer colors change with system settings such as appearance, accent color, and accessibility options. Use a fixed color unless you want the theme to change with these settings.