Light and dark themes are now driven by a single set of CSS-variable tokens instead of hand-mirrored dark: class pairs scattered across every template. A second theme or a brand recolour now means editing one block, not thousands of inline utilities. No functional or API change — purely visual and architectural.
Highlights
- CSS-variable token system (#254):
--color-background/surface/surface-2/foreground/muted/label/border, mapped to semantic Tailwind utilities (bg-surface,text-foreground,border-border, …) viahsl(var() / <alpha-value>)so opacity modifiers keep working. - Full coverage: templates and the JS-rendered markup (dashboard, settings, setup-wizard, command palette, …) migrated onto the tokens.
- Regression guardrails: a reusable dark:-pair codemod plus a CI gate that fails on stale Tailwind bundles and on any reintroduced light/dark colour pair.
- Premium polish: single
ease-premiummotion curve, aprefers-reduced-motionaccessibility guard that neutralises every animation, ashadow-overlayelevation tier, andprimary/secondarywired to the deeper brand-600/700 ramp.
Verification
Full E2E gate green on merge: Docker build and health smoke, CSP/auth/settings/pages/backup suites, and a real Let's Encrypt certificate issuance plus renewal against a live domain over Cloudflare DNS-01 (88/88). No upgrade steps required.