Dark Mode
A UI color scheme where backgrounds are dark and content is light, designed to reduce eye strain in low-light contexts.
Dark mode inverts the traditional 'dark text on light background' convention. Done well, it uses near-black (not pure black) backgrounds, slightly desaturated content colors, and adjusted shadow strategies (since drop shadows barely register on dark surfaces — borders and glows take over).
Best practice is to design dark mode as a sibling system, not a filter — colors, contrast ratios, and shadow strategies all need re-tuning, not just inversion.
- Anywhere users will spend long sessions (IDEs, dashboards, reading apps)
- Mobile apps used in low-light contexts
- Brands where dark is part of identity
- Print-style editorial that wants to feel like paper
- Bright consumer apps where energy matters
- +Use near-black (#0A0A0B–#16181D), never pure #000
- +Reduce saturation of accent colors by 10–20% in dark mode
- +Replace drop shadows with subtle borders or inner glows
- −Don't just invert — adjust each token deliberately
- −Don't use pure white text on pure black — too high contrast
Textbook examples in the directory
Emerald on near-black. Monospace developer aesthetic with thin borders.
Dark glass. Deep midnight canvas with a faint indigo-violet aurora behind; cards float as smoked glass panes with 32px backdrop-blur and a faint inset top highlight. Depth and theater without going gaudy.
Pure black void canvas, geometric medium-weight display with extreme negative tracking, frosted glass pills, and a single electric blue accent.
People also ask
Why not pure black for dark mode?
Pure black creates harsh contrast with light text and amplifies any color halos around UI elements. Near-black (#0A0A0B–#16181D) reads as 'dark' without the eye strain.