Designing Light & Dark Themes

Why Dual Themes Matter

• User preference (OS, time of day, accessibility)
• Improved battery life on OLED screens
• Reduced eye strain in low-light environments
• Brand consistency across modes

Key Principles

Maintain Brand

Colors should feel like the same brand in both modes

Preserve Contrast

Text must remain readable (WCAG AA/AAA in both light and dark)

Semantic Consistency

Primary color means the same thing in light and dark mode

Avoid Hard Invertion

Simply inverting colors doesn't work. Use tonal adjustments instead

Implementation with Tonal Field

Tonal Field automatically generates coherent light and dark variants. Use the dual-theme generator in Studio to see previews of both modes side-by-side.

CSS Custom Properties Pattern

:root {
  --color-primary: oklch(70% 0.15 200);  /* light mode */
  --color-surface: oklch(98% 0.02 90);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: oklch(80% 0.12 200);  /* dark mode */
    --color-surface: oklch(15% 0.02 90);
  }
}