Dark mode is not inverted light mode
The most common dark-mode mistake is treating it as a simple color inversion of the light theme. True dark-mode design starts from its own color system: near-black rather than pure black backgrounds (pure black causes halation and eye strain against bright text), and desaturated rather than fully saturated accent colors, since saturated colors vibrate uncomfortably against dark backgrounds.
Principles that hold up
- Elevation through lightness, not shadow: On dark surfaces, shadows barely read — use subtly lighter surface colors to communicate elevation and hierarchy instead.
- Reduce contrast slightly: Pure white text on pure black background is harsher to read for long periods than an off-white on a near-black surface.
- Test both themes independently: Don't derive one theme from the other algorithmically — design and QA both as first-class experiences.
“Good dark mode isn't a filter over your light theme. It's a second design system that happens to share your brand.”
Accessibility still comes first
WCAG contrast requirements apply identically in dark mode — it's easy to assume a theme is more accessible just because it's easier on the eyes in low light, but low-contrast dark themes can be just as exclusionary as low-contrast light ones. Always verify contrast ratios for both themes independently.