Dark mode has moved from a niche developer preference to a mainstream design standard. Every major platform -- from iOS to Google Workspace -- now offers a dark theme. But implementing dark mode well is far more nuanced than swapping a white background for a black one. It requires a fundamental rethinking of contrast, color, depth, and hierarchy.
Why dark mode matters
The appeal of dark mode goes beyond aesthetics. On OLED displays, dark pixels are literally off, which means dark interfaces consume significantly less battery. In low-light environments, a dark UI reduces eye strain by minimizing the total amount of light emitted by the screen. And for many users, dark mode simply feels more focused -- there is less visual noise competing for attention, which lets content take center stage.
From a design perspective, dark mode also opens up creative possibilities. Subtle gradients, glowing accents, and glassmorphism effects that would look washed out on a light background come alive against a dark canvas. Brands that lean into dark interfaces often project a sense of sophistication and technical credibility that resonates with modern audiences.
The contrast trap
The most common mistake in dark mode design is using pure black (#000000) as the background and pure white (#FFFFFF) for text. While this technically maximizes contrast, it creates a harsh visual experience. The extreme luminance difference causes halation -- a blooming effect where white text appears to bleed into the dark background, making it harder to read for extended periods.
Instead, use a very dark gray (such as #0A0A0A or #121212) for backgrounds and an off-white (like #E4E4E7) for body text. This softens the contrast ratio to a comfortable 13:1 or 14:1 while still exceeding WCAG AAA requirements. Reserve true white for headings and high-emphasis elements where you want maximum visual weight.
“The best dark interfaces are not dark at all -- they are carefully orchestrated layers of near-black surfaces, each one slightly lighter than the last, creating depth through elevation rather than shadow.”
Color on dark surfaces
Colors behave differently on dark backgrounds than on light ones. Saturated colors that look balanced on white will appear overly vibrant and even neon-like on dark gray. The solution is to desaturate your accent palette by 10-20% when applying it to dark themes. Many design systems maintain two versions of each brand color -- one for light mode and a toned-down variant for dark mode.
Semantic colors require special attention. A red error state that reads clearly on white may overwhelm a dark interface. Try using muted, lower-opacity versions of semantic colors and pairing them with subtle background tints rather than relying solely on the color of the text or icon.
Practical tips for getting dark mode right
- ✓Use elevation to create hierarchy. Surfaces closer to the user should be slightly lighter -- not darker. A card at #1A1A1A on a page at #0A0A0A communicates depth without any drop shadow.
- ✓Avoid pure black backgrounds. Even a 2-3% brightness increase (#050505 or #0A0A0A) dramatically reduces eye fatigue and gives you room for layering.
- ✓Test with real content. Placeholder text and empty states can mask contrast issues. Always validate your dark theme with dense, realistic content before shipping.
- ✓Desaturate your accent colors by 10-20%. Saturated hues that work on white become aggressive on dark surfaces. Tone them down for a more comfortable reading experience.
- ✓Use borders and dividers at very low opacity (5-8% white) to separate sections. Heavy borders will look jarring and break the visual flow.
Building for both modes
If your product supports both light and dark themes, design them in parallel rather than treating dark mode as an afterthought. Establish a token-based design system where every color, shadow, and opacity value is defined as a semantic variable. Instead of hardcoding “gray-200” for a border, use “border-subtle” and map it to different values per theme. This approach scales cleanly and makes future maintenance far simpler.
Dark mode is not a feature you bolt on. It is a design philosophy that, when executed well, signals attention to detail and respect for your users. Take the time to get the foundations right -- proper contrast, thoughtful color adaptation, and layered elevation -- and your dark interfaces will feel as polished and intentional as the rest of your product.