How to design dark mode properly (not just invert the palette)

Most dark modes are bad in the same way. Someone inverted the light palette, swapped the backgrounds, called it done. The result has flat depth, broken contrast in unexpected places, and colors that vibrate against the dark background instead of sitting on it.

Dark mode isn't a recolor. It's a separate palette that has to be designed against different perceptual rules.

What changes about color in dark mode

On a light background, your eyes adapt to the high luminance. Colors look more saturated than they actually are. The same hex value placed on a dark background appears more saturated still, and pure colors start to vibrate at the edges where they meet the background.

The fix is desaturation, not just darkening. A button color that works at full saturation on white needs to lose chroma to feel comfortable on a dark surface. Otherwise it pulses, especially in larger fills.

The same applies to the background itself. Pure black backgrounds produce the highest possible contrast against white text, which sounds good but reads as harsh and creates afterimages on long use. Dark grays, somewhere between #0a0a0a and #1a1a1a depending on the product, feel more natural and reduce eye strain over time.

Elevation reverses

In light mode, elevated surfaces are typically lighter than the page (white cards on a gray background, white modals on a darker overlay). In dark mode, the relationship reverses: elevated surfaces are lighter than the surface beneath them, not darker.

A modal sitting on top of a dark page background should be a lighter shade of dark, not a deeper one. Shadows still apply, but they do less work. The lift comes from the lightness difference, not from the shadow. A dark modal with a dark shadow on a dark background reads as a flat plane with a soft edge, not as something raised.

This is why most "we inverted the palette" dark modes feel flat. The light-mode shadow tokens don't translate, and the surface logic was never restructured.

What stays the same and what doesn't

Some things translate directly. Typography scale, layout, spacing, component shapes. None of these change. The structural decisions you made in light mode hold up.

What doesn't translate is anything tuned by eye against the light background. Border colors that read as subtle on white often disappear entirely on dark. Text that reads as secondary at a particular gray value in light mode reads as either primary or unreadable in dark mode depending on which way you went. Every alpha-composited value needs to be checked against the new background, because alpha over dark composites differently than alpha over light.

Brand colors usually need a dark-mode variant. The blue that anchors your brand on white will often appear too saturated or too dark on a dark background. Picking a slightly desaturated, slightly lighter version preserves brand recognition without breaking the visual feel of the mode.

Contrast in both directions

WCAG contrast requirements apply in both modes, but the failure patterns are different. In light mode, the typical problem is text that's too light against white. Secondary grays drifting below 4.5:1. In dark mode, the typical problem is text that's too dark against the dark background, plus surfaces that have lost differentiation because they all collapsed toward black.

Run contrast checks on the full set: primary text, secondary text, disabled text, link colors, button text, every state of every interactive element. The light-mode checks don't carry over.

Test it tired

The most useful dark mode test isn't a contrast checker or a screenshot review. It's spending an hour using the product in actual low-light conditions, when your eyes are tired.

That's when the cheap dark modes reveal themselves. Vibrating colors, fatiguing contrast, surfaces that all look the same. If the mode is going to be used by people working late, in bed, or anywhere with low ambient light, the experience at 11pm is the one that matters. Design against that, not against the daylight version of yourself.