# Dark mode design: backgrounds, colour and contrast

[Canonical HTML page](https://gradiently.design/guide/dark-mode-design)

Dark mode is not light mode inverted. Surfaces, text, accents and gradients all need their own values, and the rules are different from the ones you know.

## The short version

- Good dark mode design uses dark grey rather than pure black for main surfaces, which softens contrast and leaves room to show depth.
- In dark interfaces, elevation is shown by lightness: surfaces closer to the viewer are slightly lighter, because shadows barely show on dark backgrounds.
- Text on dark backgrounds reads more comfortably in off-white than in pure white, with secondary text still above 4.5:1 contrast.
- Saturated accent colours that work on white often look too heavy on dark, so dark themes use lighter, softer tints of the same hues.
- Gradients glow on dark grounds but band easily there, so dark gradients benefit from a faint layer of grain.

**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.

- Base: #0e0f12
- Surface: #121417
- Raised: #1a1d22
- Card: #22262c
- Menu and popover: #2b3038
- Text: #e6e8ec
- Secondary text: #9aa1ad

A neutral dark scale. Each surface is a little lighter than the one below it. Text measures 15:1 and secondary text 7.1:1 on the Surface colour.

## 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.

| Layer | Colour | Extra separation |
| --- | --- | --- |
| Page background | `#0e0f12` | None |
| Main surface | `#121417` | None |
| Cards | `#22262c` | 1px border `rgb(255 255 255 / 0.06)` |
| Menus and popovers | `#2b3038` | Border, plus a soft dark shadow |
| Dialogs | `#2b3038` | A dimmed scrim over everything below |

Elevation by lightness. The values are a starting point; keep your own steps even.

## 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](https://gradiently.design/guide/color-contrast-accessibility) explains how to check it.

> **Weight looks heavier on dark** Light text on a dark ground tends to look bolder than the same weight in dark on light. If body text feels heavy in dark mode, try a slightly lighter weight or a touch more letter spacing.

## 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.

### Light-mode accent on dark

- Violet `#7c3aed`: 3.2:1 on `#121417`
- Blue `#2563eb`: 3.6:1 on `#121417`
- Heavy, vibrating edges on large areas
- Fails as link text

### Dark-mode tint of the same hue

- Violet `#a78bfa`: 6.8:1 on `#121417`
- Blue `#93c5fd`: 10.2:1 on `#121417`
- Soft, luminous, clearly on brand
- Passes as link text

## 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.

- Top glow on a dark surface: `radial-gradient(ellipse at 50% 0%, #3b2a7a, #121417 60%)`
- Corner light: `radial-gradient(circle at 85% 15%, #0e7490, #121417 45%)`
- Soft violet wash: `linear-gradient(180deg, #1a1033, #121417 70%)`
- Horizon ember: `radial-gradient(ellipse at 50% 120%, #9d174d, #1a1033 45%, #121417 75%)`

Dark-mode gradients that glow and still end on the surface colour, so they sit inside the interface rather than on top of it.

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](https://gradiently.design/guide/gradient-banding) and, for the web, [CSS noise texture](https://gradiently.design/guide/css-noise-texture). For backgrounds built entirely in the dark, [dark gradient backgrounds](https://gradiently.design/guide/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.

```css
: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);
  }
}
```

One set of tokens, two themes. Slightly dimming photos in dark mode stops them glaring against the darker page.

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](https://gradiently.design/guide/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](https://gradiently.design/guide/logo-on-gradient-background).
- Both themes reviewed on a real phone, in a dim room and in daylight.

## FAQ

### Should dark mode use pure black?

Usually not for main surfaces. Dark grey, such as #121212 or similar, reduces glare, leaves room for lighter raised surfaces and avoids smearing on some OLED screens.

### What text colour is best for dark mode?

An off-white such as #e6e8ec rather than pure white. It still gives very high contrast while glaring less.

### How do you show depth in dark mode?

Make surfaces lighter as they get closer to the viewer, and use subtle borders between similar surfaces, because shadows barely show on dark backgrounds.

### Why do my brand colours look wrong in dark mode?

Saturated colours chosen for white backgrounds look heavy on dark and may fail contrast. Use lighter, softer tints of the same hues.

### Do gradients work in dark mode?

Very well: colour glows on dark grounds. Use them in a few places, end them on the surface colour, and add faint grain to stop banding.