Why Dark Mode Isn't Just Inverting Colors

⏱ 6 min read · Design & Color

You take your light mode design, swap white for black and black for white, and call it dark mode. It looks terrible. The text is too bright, the colors are garish, and everything feels wrong. What happened?

Dark mode isn't an inversion. It's a complete rethinking of color relationships based on how human vision works in low-light conditions. Here's why it's harder than it looks.

The Halation Problem

White text on a black background creates halation — a visual effect where bright elements appear to glow and bleed into dark backgrounds. This happens because the human eye's iris opens wider in dark environments, allowing more light to scatter.

Pure white (#FFFFFF) on pure black (#000000) creates maximum halation. The text becomes hard to read because the edges blur. This is why good dark modes don't use pure white text — they use light gray (#E0E0E0 or similar).

Reducing the brightness of foreground elements reduces halation and improves readability. It feels counterintuitive — shouldn't brighter text be more readable? — but it's not how vision works in dark mode.

In dark mode, less bright is more readable.

Color Saturation Shifts

Colors that look good on white backgrounds look garish on dark backgrounds. A vibrant blue (#0066FF) that's perfect for a light mode button becomes overwhelming in dark mode. The same saturation level feels more intense against dark backgrounds.

The solution: desaturate your accent colors in dark mode. If your light mode uses blue at 100% saturation, your dark mode should use the same blue at 70-80% saturation. This maintains the color identity while reducing visual intensity.

This applies to all accent colors — reds, greens, oranges, purples. Reduce saturation by 20-30% in dark mode to maintain visual balance.

The True Black Debate

Should dark mode use true black (#000000) or dark gray (#121212)? The answer depends on your screen technology and design goals.

True black works well on OLED screens because OLED pixels turn completely off for black, saving battery. But on LCD screens, true black can create too much contrast with UI elements, making them feel like they're floating.

Dark gray (#121212 to #1E1E1E) reduces contrast slightly, making the interface feel more cohesive. It's the standard for Material Design dark theme and works well across screen types. The trade-off is slightly higher power consumption on OLED.

Elevation and Shadows

In light mode, elevation is shown with shadows — darker elements cast shadows on lighter backgrounds. In dark mode, shadows don't work because you can't make black darker.

The solution: use lighter surfaces for elevated elements. A card that's elevated above the background should be slightly lighter (#1E1E1E) than the background (#121212). The more elevated, the lighter it gets.

This is the opposite of light mode, where elevated elements are the same color but cast shadows. In dark mode, the surface color itself indicates elevation.

Contrast Ratios Change

WCAG contrast ratios are calculated the same way in light and dark mode, but the perceptual effect is different. A 4.5:1 ratio in light mode feels comfortable. The same ratio in dark mode can feel harsh due to halation.

Aim for slightly higher contrast ratios in dark mode (5:1 to 7:1 instead of 4.5:1) but use softer colors to achieve it. Don't just increase brightness — adjust both lightness and saturation.

Color Temperature Matters More

In light mode, color temperature is a subtle detail. In dark mode, it's critical. Cool grays (#1A1A1D with blue undertones) feel modern and digital. Warm grays (#1D1A1A with red undertones) feel cozy and organic.

Most dark modes use cool grays because they match the blue light of screens. But warm grays can reduce eye strain for some users. Test both and see which fits your brand and audience.

Dark mode color temperature sets the entire mood of the interface.

Images and Media

Photos and illustrations designed for light backgrounds often look wrong in dark mode. Bright images with white backgrounds create jarring contrast. Dark images disappear into dark backgrounds.

Solutions: add subtle borders to images, reduce image opacity slightly (90-95%), or use different images for dark mode. Don't just drop light-mode images into dark-mode layouts.

The Transition Problem

Users who switch between light and dark mode expect consistency. The same button should be recognizable in both modes, even if the colors are different.

Maintain relative relationships: if a button is more saturated than the background in light mode, it should be more saturated in dark mode too. If text is slightly darker than pure black in light mode, it should be slightly lighter than pure white in dark mode.

Think in terms of relationships, not absolute values.

Testing Dark Mode

Don't design dark mode in a bright room. Turn down your screen brightness, dim the lights, and use the interface in conditions where users would actually choose dark mode. Colors that look good at full brightness in a bright room might not work at 30% brightness in a dark room.

Test on multiple devices. OLED screens display dark mode differently than LCD screens. What looks good on your MacBook might look washed out on an OLED phone.

When to Skip Dark Mode

Not every interface needs dark mode. If your users primarily work in bright environments (outdoor apps, photography tools, design software), dark mode might not be worth the effort.

If you do implement it, do it properly. A bad dark mode is worse than no dark mode. Users will just turn it off and never come back.