Skip to content

Themes

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

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

{
"theme": "catppuccin"
}
ThemeStyle
defaultPastel colors (cyan, yellow, pink, green)
minimalMonochrome (white + gray)
catppuccinCatppuccin Mocha palette
draculaDracula palette
gruvboxGruvbox palette
nordNord polar night/frost palette
tokyoNightTokyo Night blue/purple palette
solarizedSolarized dark palette

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

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%

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

{
"separator": "dot"
}
StyleCharacterExample
pipe (default)Model │ Context │ Cost
space Model Context Cost
dot·Model · Context · Cost
arrowModel › Context › Cost
🤖 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

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
}
}