-
Notifications
You must be signed in to change notification settings - Fork 0
Theming
ABCrimson edited this page Mar 7, 2026
·
1 revision
All colors use OKLCH — a perceptually uniform color space with P3-gamut support:
:root { --color-hue: 265; /* Change this one value to re-theme everything */ --color-primary: oklch(0.65 0.25 var(--color-hue)); --color-surface-0: oklch(0.99 0.002 var(--color-hue)); --color-text: oklch(0.20 0.02 var(--color-hue)); }
- Perceptually uniform — Equal lightness steps look equal to humans
- P3-gamut — Wider color range on modern displays
-
Simple theming — Change
--color-hueto shift the entire palette - Dark mode — Invert lightness values for automatic dark mode
| Property | Description |
|---|---|
--color-hue |
Base hue angle (0-360) |
--color-primary |
Primary brand color |
--color-surface-0 through --color-surface-3
|
Surface hierarchy |
--color-text |
Primary text |
--color-text-secondary |
Secondary text |
--color-border |
Border color |
| Property | Description |
|---|---|
--ease-spring |
Spring easing via linear()
|
--ease-out-expo |
Exponential ease-out |
--transition-fast |
120ms fast transition |
--transition-normal |
200ms normal transition |
| Selector | Target |
|---|---|
[data-command] |
Root container |
[data-command-input] |
Search input |
[data-command-list] |
List container |
[data-command-item] |
Individual items |
[data-command-item][data-active] |
Active (highlighted) item |
[data-command-item][data-disabled] |
Disabled item |
[data-command-group-heading] |
Group heading |
[data-command-separator] |
Separator line |
[data-command-empty] |
Empty state |
[data-command-dialog] |
Dialog container |
[data-command-overlay] |
Dialog overlay |
OKLCH lightness inversion:
@media (prefers-color-scheme: dark) { :root { --color-primary: oklch(0.75 0.20 var(--color-hue)); --color-surface-0: oklch(0.15 0.01 var(--color-hue)); --color-text: oklch(0.93 0.01 var(--color-hue)); } }
/* Ocean theme — just change the hue */ :root { --color-hue: 200; } /* Rose theme */ :root { --color-hue: 350; } /* Amber theme */ :root { --color-hue: 40; }