Preview themes
Preview themes change the visual look of the markdown preview pane — colors, fonts, and decorative rules — without affecting the editor or any other part of the app. Each theme is a fully self-contained color and typography palette; switching themes is instant and non-destructive.
Theme gallery
The app ships a curated library of built-in themes, spanning light and dark styles. The library is growing toward a full lineup of 20 (10 light + 10 dark); today's built-ins are:
| # | Name | Appearance | Character |
|---|---|---|---|
| 1 | Foundry | Light | Classic GitHub-neutral — clean, conventional developer-doc look. |
| 2 | Ledger | Light | Cream academic serif (Tufte-inspired) — warm paper, oxblood links. |
| 3 | Broadsheet | Light | Newspaper editorial — drop-cap, masthead ink rules. |
| 4 | Swissgrid | Light | International Typographic Style — Helvetica grid, one hot-red accent. |
| 5 | Manuscript | Light | Garamond literary — quiet book page, small-caps subheads. |
| 6 | Solar | Light | Solarized Light — precision-balanced, low-eyestrain, technical. |
| 7 | Drift | Dark | Nord — arctic, north-bluish, calm low-saturation dark. |
| 8 | Hollow | Dark | Dracula — high-contrast neon purple/pink developer dark. |
| 9 | Hearth | Light | Gruvbox warm retro — earthy contrast, yellow-bar quotes. |
| 10 | Avenue | Light | Geometric-sans gallery white — big bold heads, coral pop. |
All palettes are hardcoded — themes do not follow prefers-color-scheme. If you want the preview to look dark, pick Drift or Hollow explicitly.
How to change the theme
There are three ways to pick a theme:
Toolbar picker (in the preview pane)
A theme-switcher icon appears in the preview pane's toolbar. Click it to open a dropdown listing all built-in themes. The change is immediate — the preview updates as soon as you select a theme.
Command palette
Open the command palette (Cmd+K by default) and type "preview theme" to see the relevant commands:
Preview theme: next — cycles forward through the theme list.
Preview theme: previous — cycles backward.
Preview theme: <name> — jumps directly to a named theme (one entry per theme).
Keyboard shortcut
The cycle shortcut advances through the theme list in order. The default binding is listed in Settings → Shortcuts under "Preview theme: next" and "Preview theme: previous". You can rebind either shortcut there.
Settings
The active theme is stored as a persistent setting. To access it directly:
Open Settings (gear icon or Cmd+,).
Go to Preview.
The Theme dropdown shows all built-in themes, plus any custom themes you've saved.
Changes in Settings apply immediately and persist across restarts.
Setting a theme at app-generation time (ROOT)
When you generate a new LEAF text app from ROOT's Generate leaf app dialog, the settings step includes the Preview section. You can pick a theme before the LEAF is created — that theme becomes the LEAF's default, baked into its .zudotext.settings.json.
This is useful when you want each text app to have a visually distinct look from the start: a dark Drift Slack-messaging app, a light Ledger long-form-writing app, and so on.
After generation you can change the theme at any time from inside the LEAF, just like any other setting.
How themes work
Each theme sets a fixed set of CSS custom properties (the --ztp-* token contract) scoped to .markdown-body[data-preview-theme="<slug>"]. The preview pane reads the preview.theme setting and writes the slug as a data-preview-theme attribute on the container. All colors, font stacks, and decorative rules flow from the active theme's token block — no prefers-color-scheme query is ever consulted. Some themes also set a low-contrast background pattern (dot grid, graph paper, ruled lines) for a "paper" feel; most themes leave the background flat.
For the technical token contract, the grouped-token authoring convention (palette ramps → semantic tokens), and how to author a custom theme, see Preview Themes — Architecture.
Custom themes
You can create your own preview themes in the Theme Creator — a fullscreen dialog with a live CSS editor and a sample markdown preview. Themes you save there appear alongside the built-in themes everywhere themes are listed.
See Theme Creator for the full guide.