The "Pure Black" Trap
The first rule of dark mode club: Don't use pure black (#000000).
Pure black causes "smearing" on OLED screens when pixels turn off and on. It also creates extremely high contrast with white text, which can cause eye strain (halation). Instead, use a dark gray like #121212 or a very dark shade of your primary brand color (e.g., #0F172A).
Elevation in Dark Mode
In light mode, we use shadows to show depth. In dark mode, shadows are invisible against a dark background. So how do we show elevation?
The Solution: Lightness. The higher an element is "elevated" (closer to the user), the lighter its background color should be. A card at elevation 1 might be #1E293B, while a modal at elevation 2 might be #334155.
Desaturate Your Colors
Colors that look great on white often look like neon signs on black. They vibrate and hurt the eyes.
When adapting your brand colors for dark mode:
- Desaturate: Lower the saturation by 10-20%.
- Lighten: You often need to make the color lighter (higher value) to maintain contrast against the dark background.
Text Hierarchy
Avoid pure white text. It's too harsh. Use:
- High Emphasis: 87% opacity white (or #DEE4EA)
- Medium Emphasis: 60% opacity white (or #94A3B8)
- Disabled: 38% opacity white
Check out our Dark Mode Collection for pre-tested palettes that follow these rules.