CRZ Patterns

Dark Mode

SPA assumption: "ThemeProvider + Context + useState"

Use the Dark / Light button in the top-right corner. The preference persists across all pages via localStorage.

How It Works

  1. Every color token in @theme is a light-dark() pair, resolved by color-scheme on <html>
  2. With nothing stored, color-scheme: light dark follows prefers-color-scheme — no script involved, so it works with JavaScript off
  3. Inline <script> in <head> reads localStorage before paint and pins .light or .dark — no flash
  4. The button sends a --toggle-theme command to <html>; its label switches through the dark: variant, not script

Sample Content

Surface — bg-surface + border-border
Surface Alt — bg-surface-alt
Primary — bg-primary + text-on-primary
Danger — bg-danger + text-on-danger
Success — bg-success + text-on-success

All these colors switch automatically through color-scheme. No per-component logic needed.