📖 Notes
LESSON 22 OF 26
Dark Mode Design Best Practices
More Than Just Inverted Colors
Dark mode is more than inverting colors. Elevation, glow effects, color saturation adjustments, and accessibility.
Dark Mode Fundamentals
Elevation, Saturation, Accessibility
🏔️
Elevation via Lightness
In dark UI, surfaces closer to the "top" get lighter (not shadowed), since shadows barely read on dark backgrounds.
✨
Glow Over Shadow
Subtle light glows communicate elevation and focus where drop shadows would disappear.
🎚️
Desaturate Accent Colors
Fully saturated bright colors vibrate uncomfortably against dark backgrounds — dark mode palettes typically reduce saturation.
♿
Contrast Still Applies
WCAG contrast ratios apply in dark mode exactly as in light mode — pure white on pure black can even cause halation for some users.
Common Dark Mode Mistakes
- Simply inverting a light-mode palette instead of designing dedicated dark surfaces and text colors.
- Using pure black (#000000) backgrounds, which can cause visual smearing on OLED screens during motion.
- Forgetting to re-check contrast ratios after switching themes.