Dark mode is the stress test for any color system. If your color-bg-default is a literal #ffffff hard-coded in components, you'll discover that fact the day someone files a 'support dark mode' ticket. If your tokens are properly semantic — color-bg-default referencing a primitive that swaps under a theme — dark mode is a small CSS change.
These references treat dark mode as a first-class theme, not an afterthought. Each documents the token-swap pattern, the surfaces that need special handling (charts, illustrations, code blocks), and the user-preference detection (system preference vs explicit toggle).
- Semantic color tokens reference primitives via CSS variables; theme swap is a single CSS class on <html>.
- system preference (prefers-color-scheme) detected on first load; user override persisted in storage.
- Charts and illustrations have explicit dark-mode treatments — not just inverted colors.
- Code blocks have their own light/dark palette tuned for syntax-highlighting contrast.
- Images and logos have light/dark variants where the brand mark needs different treatment.
- Components hard-code hex values; dark mode requires a parallel set of components.
- The brand-color mark looks fine on light but disappears or becomes harsh on dark — no dark-variant logo.
- Charts use 'light blue' and 'dark blue' for series — both invisible on dark backgrounds.
Studied here
Carbon
Themes (g10, g90, g100, white)
Four theme variants out of the box, each with documented token mapping. The reference for serious enterprise dark-mode support.
Primer
Color modes
Light, dark, dark dimmed, dark high-contrast — GitHub's themes documented with explicit token-swap discipline.
Radix UI
Radix Colors
Twelve-step semantic color scales with paired light/dark variants engineered for matching contrast across themes.
Geist
Dark-first surfaces
Geist treats dark as canonical, light as alternate — the reverse of most systems and a useful study in dark-mode-as-default.