zidaneAppearance and themes
Light and dark mode, themes, accent, app icon, contrast, fonts, sizes and motion in the desktop app.
Settings › Interface › Appearance saves to the window's local storage, so it stays on this computer and never reaches the TUI or a server. The TUI themes and the UI kit's theming are separate systems.
The playground runs the kit's theme engine on a few of the app's pieces, with the Appearance tab's theme, accent and contrast controls.
Mode and themes#
Mode picks System (follows your computer), Light or Dark. The app keeps one theme for dark and one for light, so switching mode switches theme.
| Pick | From |
|---|---|
| Dark theme | The built-in dark themes, then any dark theme an extension adds |
| Light theme | The built-in light themes, then extension ones |
A theme colors the interface, Markdown and code (built-in themes).
Code theme sets the syntax colors of code and diffs, with one row for dark and one for light. Auto (matches theme), the default, follows the theme. Any other pick is a bundled code theme.
Accent and contrast#
| Swatch | Accent |
|---|---|
| Theme | The theme's own accent |
| Blue, Violet, Rose, Amber, Mint, Graphite | A preset, with a dark and a light shade |
| Custom | Any color you pick |
Text contrast runs from 50% (softer) to 200% (sharper).
App icon#
App icon picks the icon in the Dock and in Finder: Midnight blue (the default), Midnight blue grainy, Cobalt blue, Light, Modern, three chrome tiles and two chrome stickers. It applies at once and at every launch, in every window.
On macOS, notifications show the app's own icon, Midnight blue, whatever the pick. macOS does not let an app change it.
Fonts and sizes#
Fonts sets the interface, chat, prompt and code fonts. Each menu lists common installed fonts. Show all asks the system for the full list.
Chat text, Prompt text and Code size set their own sizes. Interface size scales the whole window:
| Keys | Does |
|---|---|
| Command PlusPlus | Zoom in |
| Command MinusMinus | Zoom out |
| Command 00 | Back to 100% |
Motion#
| Motion | Does |
|---|---|
| System | Follows the system's reduced-motion setting |
| Full | Every animation |
| Reduced | Keeps fades, drops movement |
| Off | Everything is instant |
Spring animations works only with Full. It lets panels, menus and indicators settle with a slight bounce. Panel animation sets how long the sidebar and side panels take to open.
Every row#
| Setting | Control | Default | Description |
|---|---|---|---|
| Mode | ControlSegmented: System, Light, Dark | DefaultSystem | DescriptionSystem follows macOS. |
| Dark theme | ControlTheme grid: Built-in and extension themes | DefaultDefault | DescriptionThe theme used in dark mode, from the built-in and extension themes. |
| Light theme | ControlTheme grid: Built-in and extension themes | DefaultLight | DescriptionThe theme used in light mode. |
| Accent | ControlSwatches: Theme, Blue, Violet, Rose, Amber, Mint, Graphite, Custom color | DefaultTheme | DescriptionOverrides the theme accent. First swatch restores it. |
| Text contrast | ControlSlider: 50% to 200% | Default100% | DescriptionLower softens, higher sharpens. |
| Interface | ControlFont menu | DefaultSystem | DescriptionSidebar and controls. |
| Chat | ControlFont menu | DefaultSame as interface | DescriptionMessages. |
| Prompt | ControlFont menu | DefaultSame as chat | DescriptionComposer. |
| Code | ControlFont menu | DefaultSystem monospace | DescriptionCode, diffs, paths. |
| Chat text | ControlSlider: 10px to 22px | Default14px | DescriptionSize of the messages. |
| Prompt text | ControlSlider: 10px to 22px | Default14px | DescriptionSize of the text you type in the composer. |
| Code | ControlSlider: 10px to 22px | Default12px | DescriptionSize of code, diffs and paths. |
| Interface size | ControlSlider: 80% to 150% | Default100% | Description⌘= / ⌘− / ⌘0 |
| Motion | ControlSegmented: System, Full, Reduced, Off | DefaultSystem | DescriptionReduced keeps fades, drops movement. Off is instant. |
| Spring animations | ControlSwitch | DefaultOn | DescriptionPanels, menus and indicators settle with a slight bounce. |
| Panel animation | ControlSlider: 0 ms to 400 ms | Default200 ms | DescriptionHow long the sidebar and side panels take to settle. |
Reset appearance, at the bottom, restores every default.
Reference#
BUILTIN_THEMES: the built-in themes.derivePalette: a palette from a theme, an accent and a contrast.- Theming: the same engine in your own UI.