Theme System

CSS tokens

Global CSS variables define the application palette, surfaces, shadows, sidebar dimensions, and topbar height.

The most important tokens are --bg, --surface, --surface-muted, --border, --text, --muted, --primary, and --primary-strong.

--bg
--surface
--surface-muted
--border
--text
--muted
--primary
--primary-strong

Dark mode

Dark mode is activated by setting data-theme="dark" on the root element.

Dark theme overrides are placed near the end of app/globals.css so they win over base component rules.

Focus states

Textfield, textarea, select, autocomplete, combobox, date picker, and file input focus states should use --textfield-focus-color with fallback to --primary.

The focus ring should use color-mix with the active primary color, not a hardcoded purple.

border-color: var(--textfield-focus-color, var(--primary));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--textfield-focus-color, var(--primary)) 12%, transparent);