Theming

Claudette ships with 14 built-in themes — built on the Claude Design token system — and supports custom themes you can create and share.

Switching Themes

Open Settings > Appearance (or press ⌘/Ctrl + ,) and select a theme from the dropdown.

Built-in Themes

Theme	Style
Default Dark	Claudette’s signature theme — coral on warm charcoal (default)
Default Light	Cream paper with deep coral accents
Jellybeans	Dark Vim-inspired palette with cool slate accent
High Contrast	Maximum legibility with cyan accent
Rosé Pine	Soho-vibes dark with iris accent
Rosé Pine Moon	Rosé Pine on warmer navy base
Rosé Pine Dawn	Rosé Pine light — cream parchment with iris accent
Solarized Dark	Schoonover’s canonical dark with blue accent
Solarized Light	Solarized inverted monotones with identical accents
Brink	Mid-tone warm chrome with Ristretto-style gold accent
Jellybeans Muted	Softer, desaturated take on Jellybeans
Midnight Blue	Cool blue-tinted dark theme
Warm Ember	Warm amber-toned dark theme
Sidekick	Ship Sidekick brand — deep navy with electric violet

Custom Themes

Create your own themes by placing JSON files in:

~/.claudette/themes/

Each file must be valid JSON with the following structure:

{
  "id": "my-custom-theme",
  "name": "My Custom Theme",
  "author": "Your Name",
  "description": "A brief description of the theme",
  "colors": {
    "color-scheme": "dark",
    "accent-primary": "#e07850",
    "accent-primary-rgb": "224, 120, 80",
    "app-bg": "rgb(28, 24, 21)",
    "text-primary": "rgb(240, 235, 229)"
  }
}

Required Fields

Field	Type	Description
`id`	string	Unique identifier (used internally)
`name`	string	Display name shown in the theme picker
`colors`	object	Map of CSS custom property names to values

Optional Fields

Field	Type	Description
`author`	string	Theme author name
`description`	string	Brief description

Theme File Limits

Maximum file size: 1 MB
File format: JSON (.json extension)
Custom themes with the same id as a built-in theme will override the built-in

Fallbacks

Any property you omit inherits the value from the Default Dark theme. You only need to specify the tokens you want to change — a theme file containing a single accent override is valid and will render correctly, with every other surface falling back to the default palette.

Color Properties Reference

You can customize any of the following 57 CSS custom properties.

Scheme

Property	Description
`color-scheme`	`"dark"` or `"light"` — controls native UI elements and syntax highlighting

Accent Colors

Property	Description
`accent-primary`	Primary accent color (e.g., `#e07850`)
`accent-primary-rgb`	RGB values for opacity variants (e.g., `224, 120, 80`)
`accent-dim`	Dimmed accent for less prominent elements
`accent-bg`	Transparent accent background (e.g., `rgba(224, 120, 80, 0.08)`)
`accent-bg-strong`	Stronger accent background
`accent-glow`	Glow/shadow effect (e.g., `0 0 12px rgba(224, 120, 80, 0.25)`)
`mascot-pink`	Secondary brand pink used for the mascot and highlight accents
`mascot-pink-dim`	Dimmed mascot pink for subtler highlights

Text

Property	Description
`text-primary`	Main text color
`text-muted`	Secondary text
`text-dim`	Tertiary text
`text-faint`	Very subtle text
`text-separator`	Separator/divider text color

Backgrounds

Property	Description
`app-bg`	Main application background
`sidebar-bg`	Sidebar background
`sidebar-border`	Sidebar border color
`chat-input-bg`	Chat input field background
`chat-header-bg`	Chat panel header
`chat-user-bg`	User message bubble background
`chat-system-bg`	System message background

Terminal

Property	Description
`terminal-tab-bg`	Inactive terminal tab background
`terminal-tab-active-bg`	Active terminal tab background
`terminal-bg`	Terminal panel background color
`terminal-fg`	Terminal text (foreground) color
`terminal-cursor`	Terminal cursor color
`terminal-selection`	Terminal text selection background

Interactive States

Property	Description
`hover-bg`	Hover background
`hover-bg-subtle`	Subtle hover background
`selected-bg`	Selected item background

Status Indicators

Property	Description
`status-running`	Running/active agent color
`status-idle`	Idle agent color
`status-stopped`	Stopped/error color

Attention Badges

Property	Description
`badge-done`	Agent finished badge color
`badge-plan`	Plan awaiting review badge color
`badge-ask`	Agent question badge color

Diff View

Property	Description
`diff-added-bg`	Added line background
`diff-removed-bg`	Removed line background
`diff-added-text`	Added line text color
`diff-removed-text`	Removed line text color
`diff-hunk-header`	Hunk header color
`diff-line-number`	Line number color

Chrome

Property	Description
`divider`	Divider/separator lines
`toolbar-active`	Active toolbar button background
`toolbar-active-text`	Active toolbar button text
`error-bg`	Error surface background
`error-border`	Error surface border
`error-hover`	Error surface hover state
`overlay-bg`	Scrim behind modals and popovers
`overlay-bg-heavy`	Stronger scrim for opaque overlays
`shadow-sm`	Small box shadow
`shadow-md`	Medium box shadow
`shadow-lg`	Large box shadow
`shadow-card-hover`	Card hover shadow

Typography

Typography tokens are themeable but most themes leave them at the Default Dark stacks. Override them to ship a theme with its own typographic voice — user-level font preferences set in Settings > Appearance still take precedence over whatever a theme specifies.

Property	Description
`font-sans`	UI sans-serif font stack (e.g., `"Inter", system-ui, sans-serif`)
`font-mono`	Monospace font stack used by code blocks and terminal tabs
`font-display`	Display font stack for headings and brand surfaces

Example: Creating a Theme

Here’s a complete example based on the built-in Warm Ember theme:

{
  "id": "warm-ember",
  "name": "Warm Ember",
  "author": "Claudette",
  "description": "A warm amber-toned dark theme",
  "colors": {
    "color-scheme": "dark",
    "accent-primary": "#f0a050",
    "accent-primary-rgb": "240, 160, 80",
    "accent-dim": "#cc8840",
    "accent-bg": "rgba(240, 160, 80, 0.08)",
    "accent-bg-strong": "rgba(240, 160, 80, 0.15)",
    "accent-glow": "0 0 12px rgba(240, 160, 80, 0.25)",
    "sidebar-bg": "rgb(26, 22, 18)",
    "sidebar-border": "rgb(48, 40, 32)",
    "text-primary": "rgb(240, 232, 220)",
    "text-muted": "rgb(160, 145, 130)",
    "text-dim": "rgb(130, 118, 105)",
    "text-faint": "rgb(100, 90, 78)",
    "text-separator": "rgb(75, 65, 55)",
    "hover-bg": "rgba(255, 200, 120, 0.06)",
    "hover-bg-subtle": "rgba(255, 200, 120, 0.04)",
    "selected-bg": "rgba(240, 160, 80, 0.1)",
    "divider": "rgb(50, 42, 34)",
    "status-running": "#f0a050",
    "status-idle": "rgb(120, 110, 100)",
    "status-stopped": "#e85050",
    "diff-added-bg": "rgba(0, 180, 80, 0.12)",
    "diff-removed-bg": "rgba(220, 40, 40, 0.12)",
    "diff-added-text": "rgb(80, 210, 110)",
    "diff-removed-text": "rgb(235, 100, 100)",
    "diff-hunk-header": "rgb(120, 170, 230)",
    "diff-line-number": "rgb(100, 90, 78)",
    "chat-user-bg": "rgba(240, 160, 80, 0.05)",
    "chat-system-bg": "rgba(240, 180, 60, 0.08)",
    "chat-input-bg": "rgb(30, 26, 20)",
    "chat-header-bg": "rgb(26, 22, 18)",
    "terminal-tab-bg": "rgb(30, 26, 20)",
    "terminal-tab-active-bg": "rgb(44, 38, 30)",
    "terminal-bg": "rgb(18, 15, 12)",
    "terminal-fg": "rgb(240, 232, 220)",
    "terminal-cursor": "rgb(240, 232, 220)",
    "terminal-selection": "rgba(240, 160, 80, 0.25)",
    "toolbar-active": "rgba(240, 160, 80, 0.12)",
    "toolbar-active-text": "#f0a050",
    "app-bg": "rgb(18, 15, 12)",
    "shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.3)",
    "shadow-md": "0 4px 12px rgba(0, 0, 0, 0.4)",
    "shadow-lg": "0 8px 24px rgba(0, 0, 0, 0.5)",
    "shadow-card-hover": "0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(240, 160, 80, 0.15)",
    "badge-done": "#50d8a0",
    "badge-plan": "rgb(120, 170, 230)",
    "badge-ask": "#f0a050"
  }
}

Save this file to ~/.claudette/themes/warm-ember.json, then select it from Settings > Appearance. Most custom themes are much shorter — only the tokens you want to change need to appear.