# Appearance 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](https://zidane.si/docs/tui-themes.md) and the UI kit's [theming](https://zidane.si/docs/ui-theming.md) 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](https://zidane.si/docs/reference/ui-theme-themes.md)).

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 |
| - | - |
| `cmd+plus` | Zoom in |
| `cmd+minus` | Zoom out |
| `cmd+0` | 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 (Mode) | Segmented: System, Light, Dark | System | System follows macOS. |
| Dark theme (Dark theme) | Theme grid: Built-in and extension themes | Default | The theme used in dark mode, from the built-in and extension themes. |
| Light theme (Light theme) | Theme grid: Built-in and extension themes | Light | The theme used in light mode. |
| Accent (Accent) | Swatches: Theme, Blue, Violet, Rose, Amber, Mint, Graphite, Custom color | Theme | Overrides the theme accent. First swatch restores it. |
| Text contrast (Contrast) | Slider: 50% to 200% | 100% | Lower softens, higher sharpens. |
| Interface (Fonts) | Font menu | System | Sidebar and controls. |
| Chat (Fonts) | Font menu | Same as interface | Messages. |
| Prompt (Fonts) | Font menu | Same as chat | Composer. |
| Code (Fonts) | Font menu | System monospace | Code, diffs, paths. |
| Chat text (Sizes) | Slider: 10px to 22px | 14px | Size of the messages. |
| Prompt text (Sizes) | Slider: 10px to 22px | 14px | Size of the text you type in the composer. |
| Code (Sizes) | Slider: 10px to 22px | 12px | Size of code, diffs and paths. |
| Interface size (Sizes) | Slider: 80% to 150% | 100% | ⌘= / ⌘− / ⌘0 |
| Motion (Motion) | Segmented: System, Full, Reduced, Off | System | Reduced keeps fades, drops movement. Off is instant. |
| Spring animations (Motion) | Switch | On | Panels, menus and indicators settle with a slight bounce. |
| Panel animation (Motion) | Slider: 0 ms to 400 ms | 200 ms | How long the sidebar and side panels take to settle. |

Reset appearance, at the bottom, restores every default.

![Settings, Appearance tab: mode, dark and light theme grids, accent swatches.](https://zidane.si/captures/settings-appearance-light.webp)

## Reference

- [`BUILTIN_THEMES`](https://zidane.si/docs/reference/ui-theme-themes.md): the built-in themes.
- [`derivePalette`](https://zidane.si/docs/reference/ui-theme-derive.md): a palette from a theme, an accent and a contrast.
- [Theming](https://zidane.si/docs/ui-theming.md): the same engine in your own UI.