Themes

claude-dashboard supports 9 color themes and 4 separator styles to customize the visual appearance of your status line.

Color Themes

Set the theme in your configuration file (~/.claude/claude-dashboard.local.json):

{
  "theme": "catppuccin"
}

Available Themes

Theme	Style
default	Pastel colors (cyan, yellow, pink, green)
minimal	Monochrome (white + gray)
catppuccin	Catppuccin Mocha palette
catppuccinLatte	Catppuccin Latte palette (light-mode terminals)
dracula	Dracula palette
gruvbox	Gruvbox palette
nord	Nord polar night/frost palette
tokyoNight	Tokyo Night blue/purple palette
solarized	Solarized dark palette

Each theme provides semantic color roles used across all widgets, ensuring a consistent look regardless of which widgets you have enabled.

Theme Previews

Each preview below uses the actual hex colors from the theme definition.

default — Pastel colors

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

minimal — Monochrome

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

catppuccin — Catppuccin Mocha

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

catppuccinLatte — Catppuccin Latte (light-mode terminals)

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

dracula — Dracula

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

gruvbox — Gruvbox

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

nord — Nord

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

tokyoNight — Tokyo Night

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

solarized — Solarized Dark

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

Separator Styles

The separator controls the character used between widgets on the same line.

{
  "separator": "dot"
}

Available Separators

Style	Character	Example
pipe (default)	│	Model │ Context │ Cost
space		Model Context Cost
dot	·	Model · Context · Cost
arrow	›	Model › Context › Cost

Separator Previews

◆ Opus(X) │ ██░░ 45% │ $1.25 │ 5h: 42% pipe (default)

◆ Opus(X) ██░░ 45% $1.25 5h: 42% space

◆ Opus(X) · ██░░ 45% · $1.25 · 5h: 42% dot

◆ Opus(X) › ██░░ 45% › $1.25 › 5h: 42% arrow

Combined Example

Here is a configuration using the Tokyo Night theme with dot separators:

{
  "language": "en",
  "plan": "max",
  "displayMode": "normal",
  "theme": "tokyoNight",
  "separator": "dot",
  "cache": {
    "ttlSeconds": 300
  }
}