Dark Mode Design
Avoid pure black backgrounds. Pure black pixels smear on OLED screens. Use dark gray or deep blue. Invert elevation logic.
What is OLED Smearing?
OLED Smearing is A visual glitch. Pure black pixels turn off. They lag when scrolling. This feels cheap.
The 3 Core Benefits
Reduce Strain
Dark mode reduces eye fatigue. Most developers prefer it for long work sessions.
Save Battery
Dark pixels use less energy on OLED screens. This extends mobile battery life.
Premium Feel
Dark interfaces feel modern. Use gray elevations to show depth.
Dark Mode Rules
No Pure Black
Use Slate or Gray 900. Pure black creates too much contrast against text.
Desaturate
Bright colors vibrate on dark themes. Reduce saturation by twenty percent for better legibility.
Gray Elevation
Higher components use lighter gray. Do not rely on shadows.
Lazy Dark Mode vs. Pro Dark Mode
| Feature | Lazy Dark Mode | Pro Dark Mode |
|---|---|---|
| Contrast | Harsh | Soft |
| Depth | Flat | Elevated |
Frequently Asked Questions
Should I default to it?
Default to system preference. Respect the user choice.
What about logos?
Create a specific logo for dark mode. Black logos vanish on dark themes.
Ready for traffic from trusted founders?
Go back home