Dark mode, built rather than inverted

Inverting does not work

The cheap approach is a filter that flips every lightness value. It produces a theme where the brand colour is wrong, the photographs are negatives, the shadows are inverted into glows, and the text is pure white on pure black — which is the one combination you specifically do not want.

A dark theme is a second design with its own decisions. There are five of them and they are all small.

1. Not pure black, and not pure white

White text on #000000 produces the strongest halation, the smearing effect from the contrast lesson where bright glyphs appear to bleed into the dark field. It is worse for readers with astigmatism and worse on OLED screens, where the pixels around a lit glyph are genuinely switched off and the transition is absolute.

The widely used baseline is a very dark grey rather than black — Material Design specifies #121212 for the base surface — with text below full white. A common approach is white at around 87% opacity for primary text, 60% for secondary, which lands near #DEDEDE and #999999 on that surface.

Those particular numbers are one team's answer rather than a law. The principle behind them is not: back off both extremes.

2. Elevation runs the other way

In a light theme, a raised surface casts a shadow and gets darker at its edges. In a dark theme a shadow is invisible, because there is nothing darker for it to be.

So elevation is expressed by lightness instead: the higher a surface sits, the lighter it is. A dialogue floats above a card, which floats above the page, and each step is a few points lighter. This is why dark themes need more neutral steps at the dark end than light themes need at the light end, and why the compression discussed in the neutrals lesson bites hardest here.

3. Saturated colours have to change

A brand blue that works on white is often close to unreadable on a dark surface, and a fully saturated colour on a dark ground appears to vibrate — an effect strong enough that two adjacent saturated colours on black can be genuinely uncomfortable to look at.

The adjustment is to lighten and desaturate for dark mode. A brand at oklch(0.50 0.20 255) on white might become oklch(0.72 0.13 255) on a dark surface: lighter so the contrast works, less chromatic so it stops buzzing.

This means a real dark theme has its own colour values, not a filter applied to the light ones. CSS makes maintaining two sets straightforward:

:root { color-scheme: light dark; }
.button {
  background: light-dark(oklch(0.50 0.20 255), oklch(0.72 0.13 255));
}

4. Text looks heavier on dark

Because of halation, the same font at the same weight appears bolder on a dark background. A page set in a 400 weight on white can look like 500 on dark.

The correction is to drop a weight step, or where a variable font is available, to shave the weight axis slightly:

@media (prefers-color-scheme: dark) {
  body { font-weight: 350; }
}

This is a genuinely small change that removes a widespread and rarely-diagnosed sense that the dark version looks clumsier than the light one.

5. Images and shadows need handling

Photographs on a dark surface often look too bright, and a common treatment is a slight brightness reduction. Logos and illustrations supplied as dark artwork on transparency vanish entirely, so they need a light variant. Shadows should be replaced by surface lightness, as above, or used only at very low opacity for a subtle edge.

Is dark mode better?

This is less settled than the enthusiasm suggests, and it is worth being accurate.

For people with ordinary vision in ordinary lighting, most reading studies find dark text on a light background is read at least as well as, and often better than, the reverse — the same halation effect is the usual explanation. The claimed benefits for eye strain and for sleep are weaker than commonly stated; screen brightness and ambient light matter more than polarity.

What is well supported is that dark themes are clearly better for some people: those with light sensitivity, some migraine sufferers, some people with certain visual conditions, and anybody reading in a genuinely dark room. Battery saving on OLED is real and modest.

So the defensible position is: offer both, respect the system setting by default with prefers-color-scheme, and build the dark theme properly rather than treating it as a filter over the real one. Neither theme is the correct one. Both are, for different readers.