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. Inline <script> in <head> reads localStorage before paint — no flash
  2. Click toggles .dark class on <html>
  3. CSS custom properties in @theme / .dark handle all colors
  4. Respects prefers-color-scheme as default when no preference is stored

Sample Content

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

All these colors switch automatically based on the .dark class. No per-component logic needed.