Why does my palette look bad in dark mode?

Usually because it was inverted rather than derived. Colors read duller against dark surroundings, light-mode contrast logic runs backwards, and elevation cues disappear — a dark palette needs its own lightness curve and a saturation boost, computed from the same seeds.

Should dark backgrounds be pure black?

Rarely. Near-blacks around the deep grays leave room for elevation (surfaces get lighter as they rise) and soften the glare of white text. Pure black has one genuine argument — OLED power and contrast — which is a deliberate trade, not a default.

Do I need separate colors for dark mode?

Separate values, not separate decisions. A derived dark palette recomputes every ramp from the same seeds — new lightness curve, boosted saturation — so the brand survives while every value adapts. Hand-picking a second palette doubles the maintenance instead.

How does elevation work in dark mode?

Lighter means closer. Shadows barely register on dark surfaces, so raised elements signal height by being lighter than what they sit on — the opposite of light mode's shadow logic.

What contrast rules apply in dark mode?

The same floors — 4.5:1 for body text, 3:1 for large text and UI parts — but new failure modes: pure white text on dark glows (halation), saturated brand colors sink, and near-black surface steps collapse into each other.

How do I implement theme switching?

Through semantic tokens — background, surface, text-primary — that hold one value per theme. Components reference the token, prefers-color-scheme (plus a manual toggle) picks the theme, and no component knows which mode it is in.

Dark Mode Design: The Practical Guide

Dark mode is not light mode with the values flipped — it is a second rendering of the same design system, derived from the same seeds under different physics: colors read duller against dark surroundings, elevation must signal with lightness instead of shadow, and contrast fails in new places. This hub collects our guides on getting it right; the one-image version is a palette and its derived dark twin, side by side.

Inversion is the trap

Flipping a light palette puts text values where surfaces should be, turns elevation upside down, and drains the brand color of its apparent saturation. Every guide in this hub starts from the alternative: derivation. The dark palette is computed from the same seed — its own lightness curve, a deliberate saturation boost to counter how dark surroundings mute color — so the brand survives while every value adapts to the new physics. Dark Mode Is Not Inversion makes that argument in full and is the natural first read; Adapting Brand Colors for Dark Mode applies it to the hardest case, the brand color itself. Derivation is also how Scale Composer treats dark mode: the same seeds that produce the light palette, the type scale and the grid produce the dark palette too, so the dark theme is recomputed output rather than a second hand-maintained file.

The new physics, briefly

Three effects drive most dark-mode decisions. Perceived saturation drops against dark backgrounds, which is why derived dark ramps boost chroma. Shadows lose their signal on dark surfaces, so height is communicated by lightness — raised surfaces are lighter surfaces. And glare inverts: white text on near-black can bloom, near-black steps crowd together, and the contrast failures move to places light mode never had them.

Each effect has its own guide: Why Colors Look Duller on Dark measures the saturation drop and its compensation, Elevation in Dark Mode works out the lighter-means-closer logic, and Dark Mode Contrast Pitfalls maps where the failures move. The intuition behind all three is the same: the visual system judges color and depth relative to their surroundings, so changing the surroundings changes every judgment — no pixel needs to move for the perception to.

The background itself is a decision, not a given. Never Pure Black explains why most dark themes sit a few steps above #000 — room for elevation to signal, less glare against light text — and OLED and True Black gives the one genuine counter-argument, power and contrast on OLED panels, a fair hearing.

Tokens make it a mode, not a project

The engineering half is a naming discipline: components reference semantic roles — background, surface, text-primary — and each role holds one value per theme. Switch the theme and every bound element follows; no component carries an opinion about which mode it is in. The same machinery is covered from the token side in our design tokens guide and from the palette side in color scales. Within this hub, Semantic Tokens for Theme Switching builds the naming layer, and prefers-color-scheme: Doing It Right in CSS wires it to the reader’s system preference — plus the manual toggle users expect to win.

What derivation doesn’t cover

Two jobs remain manual after the palette is derived. Photographs, illustrations and logos arrive with their own backgrounds and their own contrast assumptions — Images and Media in Dark Mode covers dimming, transparent edges and the cases where an asset needs a second cut. And a derived palette is a strong first draft, not a verdict: Testing a Dark Palette is the checklist pass — real content, real screens, brightness turned down — that catches what the math can’t see.

Guides in this hub

Adapting Brand Colors for Dark Mode
Adapting brand colors for dark mode: why the canonical value fails on near-black, which ramp step takes over the job, and re-running the on-fill check.
Dark Mode Contrast Pitfalls
Dark mode contrast keeps the same WCAG floors, but the failures move: mid grays collapse, brand colors sink, and pure white passes the math yet blooms.
Dark Mode Is Not Inversion
Dark mode design starts where inversion fails: flipped role logic, broken elevation, drained color. What deriving a dark palette from the same seeds means.
Elevation in Dark Mode: Lighter Means Closer
Dark mode elevation runs on lightness, not shadow: surfaces get lighter as they rise. Building the surface ladder with real numbers and the JND crowding limit.
Images and Media in Dark Mode
Images in dark mode keep their own pixels: a bright photo turns to glare on a near-black page. Dimming, dark variants, currentColor and the frame pattern.
Never Pure Black: Choosing Dark Backgrounds
Pure black is the wrong dark mode background color for most interfaces: no room below for elevation, halation glare. The near-black range that works.
OLED and True Black: The Debate
OLED makes a true black dark mode tempting: black pixels switch off, saving power. What #000 costs — elevation, smear, glare — and why near-black stays default.
prefers-color-scheme: Doing It Right in CSS
How prefers-color-scheme works: the media query as default, a data-theme override for the manual toggle, color-scheme, and the wrong-theme-flash fix.
Semantic Tokens for Theme Switching
Dark mode design tokens explained: semantic roles that hold one value per theme, why the dark mapping is not a mirror, and the CSS that switches themes.
Testing a Dark Palette
Dark mode testing in seven checks: re-verify contrast per theme, check surface separability, states, glare, color vision, and content at night brightness.
Why Colors Look Duller on Dark (and the 20% Fix)
Dark mode colors washed out? The same chroma reads duller on near-black — simultaneous contrast explains why, and a ~20% chroma boost restores the vividness.

Watch a palette cross over

The fastest cure for inversion thinking is watching a derivation: flip a full palette between light and its derived dark — the same seeds, the dark side running its own lightness curve with the chroma boost applied. What changes, and what deliberately doesn’t, is the whole subject of this hub in one interaction.