Theming

Theming

OKLCH Color Space

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

Why OKLCH?

• Perceptually uniform — Equal lightness steps look equal to humans
• P3-gamut — Wider color range on modern displays
• Simple theming — Change --color-hue to shift the entire palette
• Dark mode — Invert lightness values for automatic dark mode

CSS Custom Properties

Colors

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

Animation

Property	Description
--ease-spring	Spring easing via linear()
--ease-out-expo	Exponential ease-out
--transition-fast	120ms fast transition
--transition-normal	200ms normal transition

Data Attributes for Styling

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

Dark Mode

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

Custom Theme Example

/* Ocean theme — just change the hue */
:root { --color-hue: 200; }

/* Rose theme */
:root { --color-hue: 350; }

/* Amber theme */
:root { --color-hue: 40; }