VOL. III · CH. 3.32 · COMPONENT
Dark Mode
More than an inverted color palette — a second, fully considered design system.
1 min read · 130 words
3.32.1Definition & Anatomy
Dark mode is an alternate color scheme optimized for low-light viewing and reduced eye strain, built as a genuine parallel palette rather than a naive color inversion of the light theme.
3.32.2Common Mistakes
- Simple CSS color inversion, which breaks images, shadows, and brand colors that weren't designed to invert.
- Insufficient contrast in dark mode specifically, since perceived contrast behaves differently on dark backgrounds.
3.32.3Best Practices
- Design dark mode as its own considered palette, not an automatic inversion of light-mode values.
- Respect the operating system's light/dark preference by default, with a manual override available.
ExampleApple's Human Interface Guidelines specify true dark-mode-specific color tokens rather than inverted light-mode colors, since pure black backgrounds and inverted shadows behave visually differently than a naive inversion would produce.