Theme Creator

The Theme Creator lets you author, name, and save custom preview themes directly in the app. Your saved themes are available everywhere built-in themes appear — the preview-pane theme picker, Settings → Preview, and the next/prev-theme cycling commands.

See also: Preview themes for an overview of preview themes and the full list of built-in themes.

Launching the Theme Creator

Open the command palette (Cmd+K by default), type "Theme Creator", and select Open Theme Creator. The dialog opens fullscreen.

You can also bind a dedicated keyboard shortcut in Settings → Shortcuts (search "Theme Creator").

The toolbar runs across the top of the dialog and contains all controls for managing your custom themes:

Control	What it does
Theme pulldown	Selects the active theme to edit. The list has three groups: the built-in presets, a My themes group listing your saved custom themes (empty until you save one), and a Create new theme entry at the bottom. Picking any entry loads its CSS into the editor on the right.
Title input	The display name for your theme. Required before you can save.
Save (disk icon)	Saves the current draft CSS and name. A confirmation dialog appears before saving. A success notification is shown after the save completes.
Delete (trash icon)	Deletes the currently selected custom theme. A confirmation dialog appears first. Built-in presets cannot be deleted — the delete button is disabled when a built-in is selected.
Help (?)	Opens a help dialog explaining the CSS scope contract and the `--ztp-*` token reference.

The body

Below the toolbar the dialog splits into two equal-width panels:

Left panel — live preview

A live preview of a sample document that exercises all markdown elements: headings (H1–H4), body text, bold, italic, blockquotes, ordered and unordered lists, inline code, fenced code blocks, a horizontal rule, a table, and links. The preview reflects your draft CSS in real time as you type in the editor.

A Preview / Edit toggle at the top of the left panel switches between the rendered preview and a plain-text editor for the sample markdown. Use the edit mode to adjust the sample text — for example, to focus on a particular element while you tune colors. Sample edits are discarded when the dialog closes; they do not affect your saved themes.

Right panel — CSS editor

A CodeMirror CSS editor (the same editor preset used throughout the app) showing the full theme CSS. The editor has syntax highlighting, line numbers, and undo/redo history. Your edits are applied to the live preview instantly.

How to create a theme

Open the Theme Creator from the command palette.
Pick a starting point from the Theme pulldown — any built-in preset loads its full CSS into the editor so you can start from a working template rather than a blank file.
Edit the CSS on the right. The live preview on the left reflects your changes immediately.
Type a name in the Title input.
Click Save. Confirm in the dialog that appears. A notification confirms the save.

Your new theme is now listed under My themes in the Theme Creator and in every other place themes are listed: the preview-pane toolbar picker, Settings → Preview, and the cycling commands.

How to edit a saved theme

Open the Theme Creator.
Select your theme from the My themes section of the pulldown. Its CSS loads in the editor.
Make your changes.
Click Save and confirm. The save overwrites the existing theme; the name and id stay the same.

How to delete a theme

Open the Theme Creator.
Select the theme to delete from My themes.
Click the Delete (trash) button and confirm. The theme is removed immediately.

Note

Deleting a theme that is currently active as the selected preview theme is safe — the preview automatically falls back to the default built-in theme (Foundry) rather than showing an unstyled preview.

Where themes are saved

Custom themes are stored as JSON files in the global config directory for the current text app:

~/.config/zudotext/<appname>/themes/<theme-id>.json

This directory is shared across every workspace you open with the same app. A theme you create in one workspace is available in all your other workspaces for that app automatically.

Each JSON file contains the theme's id, name, appearance hint, full css string, and createdAt/updatedAt timestamps. You can read, copy, or move these files directly if you want to share a theme between different text apps (for example, from modmsg.app to worktext.app).

Note

An online / cloud-sync option for sharing custom themes across devices is planned but not yet available. For now, themes live only on the machine where they were created.

CSS authoring notes

The CSS editor accepts any valid CSS. A few conventions to follow for best results:

Use data-preview-theme selectors for your rules. The seed CSS loaded from a built-in preset is already fully scoped: selectors look like .markdown-body[data-preview-theme="foundry"] { … }. When you save, the app rewrites every data-preview-theme="…" value in your CSS to your theme's unique id automatically, so the saved CSS is always correctly scoped to your theme.
Bare selectors leak across themes. If you add a rule like .markdown-body h1 { color: red; } without the data-preview-theme predicate, it will apply globally and affect other preview themes. The Help dialog (the ? button) lists the full --ztp-* token reference — using those tokens inside a properly scoped block is the recommended approach.
System fonts work; web fonts need to be available locally. The preview pane renders in the same WebKit process as the app, so only fonts installed on the machine are available. Custom web fonts loaded from a URL will not load in the preview pane.
Override --ztp-* tokens to control colors, fonts, and spacing. All colors and font stacks flow from --ztp-* custom properties. See Preview Themes — Architecture for the full token contract.