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).
- 01Semantic color tokens reference primitives via CSS variables; theme swap is a single CSS class on <html>.
- 02system preference (prefers-color-scheme) detected on first load; user override persisted in storage.
- 03Charts and illustrations have explicit dark-mode treatments — not just inverted colors.
- 04Code blocks have their own light/dark palette tuned for syntax-highlighting contrast.
- 05Images and logos have light/dark variants where the brand mark needs different treatment.
- 01Components hard-code hex values; dark mode requires a parallel set of components.
- 02The brand-color mark looks fine on light but disappears or becomes harsh on dark — no dark-variant logo.
- 03Charts use 'light blue' and 'dark blue' for series — both invisible on dark backgrounds.
Carbon
IBM
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
GitHub
Color modes
Light, dark, dark dimmed, dark high-contrast — GitHub's themes documented with explicit token-swap discipline.
Radix UI
WorkOS
Radix Colors
Twelve-step semantic color scales with paired light/dark variants engineered for matching contrast across themes.
Geist
Vercel
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.