Themes

claude-dashboard supports 8 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
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(H) │ ██░░ 45% │ $1.25 │ 5h: 42% │ 7d: 69%

minimal — Monochrome

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

catppuccin — Catppuccin Mocha

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

dracula — Dracula

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

gruvbox — Gruvbox

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

nord — Nord

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

tokyoNight — Tokyo Night

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

solarized — Solarized Dark

🤖 Opus(H) │ ██░░ 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(H) │ ██░░ 45% │ $1.25 │ 5h: 42% pipe (default)

🤖 Opus(H) ██░░ 45% $1.25 5h: 42% space

🤖 Opus(H) · ██░░ 45% · $1.25 · 5h: 42% dot

🤖 Opus(H) › ██░░ 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
  }
}