Dark mode is popular, but poorly executed dark themes cause eye strain and readability issues.
Use Elevation, Not Borders
In dark UI, surfaces at different depths use slightly lighter backgrounds — not shadows. Base: #121212, cards: #1e1e1e, modals: #2a2a2a.
Desaturate Accent Colors
Colors that pop on white can vibrate on dark backgrounds. Reduce saturation by 10–20% for dark mode variants.
Text Opacity Levels
- Primary text: 87% white
- Secondary text: 60% white
- Disabled text: 38% white