Dark mode design: backgrounds, colour and contrast

Dark mode design means building a separate set of values for surfaces, text, accents and imagery, not flipping light mode's colours. Dark grounds change how colour behaves: saturated hues look heavier, shadows disappear, bright white text glares, and smooth gradients band. The good news is that the same properties make dark themes beautiful when handled well: colour glows, depth feels layered, and the content sits calmly in front.

Why to avoid pure black backgrounds

Pure black, #000000, with pure white text gives the maximum possible contrast of 21:1. That sounds ideal but is often uncomfortable: many readers see bright text bloom or vibrate against pure black, especially in long passages. Black also leaves nowhere darker to go, so you cannot show one surface sitting below another. And on some OLED phones, content scrolling over true black can leave a brief smear as pixels switch on. Google's Material Design guidance uses #121212 as its base dark surface for these reasons.

Showing elevation with lightness

In light mode, shadows separate a card from the page. On a dark background, a dark shadow barely shows. So dark themes flip the logic: the closer a surface is to the viewer, the lighter it is. The page is darkest, cards are a step lighter, menus and dialogs lighter again. Keep the steps small and consistent, and add a hairline border in a slightly lighter tone where two similar surfaces meet.

Text colour and contrast in dark mode

Use an off-white such as #e6e8ec for body text instead of pure white. It still gives very high contrast, 15:1 on #121417, and it glares less. Secondary text can drop to a mid grey, but check it: #9aa1ad stays at 7.1:1 on the same surface and 5.5:1 on a lighter card. WCAG asks for at least 4.5:1 for normal text, whatever the theme; colour contrast explains how to check it.

Desaturating accent colours

A strong violet like #7c3aed works as a button on white. On a dark surface it looks heavy and measures only 3.2:1, too low for text links. Its lighter tint #a78bfa measures 6.8:1 on the same background and reads as the same brand colour. The general rule: move accents lighter and slightly less saturated for dark themes, and keep the hue.

Gradients in dark mode design

Dark grounds are where gradients shine. A deep background lets colour look like light rather than paint, which is why glows, auroras and neon blends are so often shown on near-black. Keep most of the surface dark and let colour appear in one or two places: a glow behind a hero, a gradient edge on a featured card, a soft wash at the top of a page.

The catch is banding. Dark, slow fades use only a few distinct shades on an 8-bit screen, so steps become visible. A faint grain layer hides them; see gradient banding and, for the web, CSS noise texture. For backgrounds built entirely in the dark, dark gradient backgrounds has palettes.

Building dark mode in CSS

Define colours once as custom properties and switch their values per theme. color-scheme tells the browser to render its own controls and scrollbars in the matching theme, and the light-dark() function picks between two values based on the active scheme.

:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #121417);
  --card: light-dark(#f6f7f9, #22262c);
  --text: light-dark(#16181d, #e6e8ec);
  --text-muted: light-dark(#5b6270, #9aa1ad);
  --accent: light-dark(#7c3aed, #a78bfa);
}

body {
  background: var(--surface);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);
  }
}

Give people a manual switch as well as following the system setting, and remember everything beyond the interface: charts, illustrations, logos and email all need checking in both themes. Gradients in email covers how mail apps handle dark mode.

A dark mode checklist

• Dark grey surfaces, not pure black, with a clear lightness step per elevation.
• Off-white body text at high contrast; secondary text still above 4.5:1.
• Accents moved lighter and softer, keeping the brand hue.
• Borders, not shadows, to separate similar surfaces.
• Colour used as light in a few places, not everywhere.
• Grain on large dark gradients to prevent banding.
• Logos with a light version for dark grounds; see logo on a gradient background.
• Both themes reviewed on a real phone, in a dim room and in daylight.