Skip to content
UX Atlas
Plate FND·027 · UI foundationGrid D2 · Rev. 2026-08-14

Dark Mode

Not an inversion. A second theme with its own contrast, elevation and saturation rules.

UI foundationCraft conventionIntermediate

Definition

Dark mode is a theme in which surfaces are dark and content is light. It requires its own colour decisions, because perceptual relationships do not survive inversion and several visual mechanisms behave differently on dark backgrounds.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2What changes, and why
  3. 3Implementation requirements
  4. 4Building it without inverting
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Adding a second theme.
  • Auditing an existing dark mode for contrast failures.
  • Designing for low-light or medical contexts.

Common mistakes

  • Arithmetic inversion of a light palette.
  • Pure black and pure white.
  • Illustrations and charts left untouched.
  • Contrast verified only in light mode.
  • Treating dark mode as a filter applied at the end rather than a second set of decisions.

What changes, and why

AspectLight modeDark mode
ElevationShadowLighter surface. Shadows are nearly invisible on dark backgrounds.
TextNear-black on whiteOff-white on dark grey. Pure white on pure black causes halation.
SaturationStandardReduced. Saturated colours vibrate against dark backgrounds.
Accent lightnessMid ramp stepLighter step, so it stays visible and passes contrast.
BordersDarker than surfaceLighter than surface, and often subtler.
ImagesAs authoredMay need a slight dimming layer to avoid glare.

Implementation requirements

  • Respect prefers-color-scheme by default, and offer a manual override that persists.
  • Avoid pure black surfaces and pure white text. Around 12 percent lightness for surfaces and 96 percent for text is a reasonable starting point.
  • Re-verify every contrast pair. Ratios do not transfer between themes.
  • Recolour illustrations and diagrams, or provide dark variants. A light-background SVG in dark mode is a glaring rectangle.
  • Check focus indicators, which frequently disappear in one theme or the other.
  • Prevent the flash of the wrong theme on load, usually by setting the theme attribute before first paint.

Building it without inverting

Do

  • Design the dark palette alongside the light one, so both are considered.
  • Express elevation with surface lightness, since shadows barely read on dark grounds.
  • Desaturate accents slightly, because saturated colour vibrates on dark backgrounds.
  • Check contrast independently in both themes, including disabled and secondary text.

Do not

  • Invert the light palette and ship it.
  • Use pure black, which maximises halation against light text.
  • Use pure white text, which is uncomfortable at length on a dark ground.
  • Assume images and illustrations work in both themes without adjustment.

In practice

  1. i.

    Elevation by surface, not by shadow

    Dark themes

    Raised surfaces in dark mode become lighter rather than casting a shadow. Material Design formalised this as elevation overlays, and it is the standard approach.

  2. ii.

    Shadows that disappeared

    Elevation in the dark

    A card system built entirely on shadow read as perfectly flat in dark mode. Elevation there has to come from surface lightness, which means the system needs both mechanisms defined from the start.

Local chart

FND·027 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

ThemingTERM·088 · SHORT DEFINITIONFocus IndicatorsA11Y·003 · RELATED CONCEPTDesign TokensSYS·001 · RELATED CONCEPTThemingSYS·008 · RELATED CONCEPTBrand Color in InterfacesFND·024 · RELATED CONCEPTColor AccessibilityFND·028 · RELATED CONCEPTColor SystemsFND·026 · RELATED CONCEPTColor Theory for InterfacesFND·019 · RELATED CONCEPTContrastFND·002 · RELATED CONCEPTElevationFND·048 · RELATED CONCEPTFont WeightFND·033 · RELATED CONCEPTImageryFND·051 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    Dark Mode vs. Light Mode: Which Is Better?

    Nielsen Norman Group, 2020

    Summarises the mixed polarity research.

  2. [2]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.