Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Dark Mode

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

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 page
  1. Definition
  2. What changes, and why
  3. Implementation requirements
  4. In practice
  5. Sources
  6. Continue from here

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.

In practice

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.

Sources

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

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.