Dark mode is not just inverted light mode: the design decisions that make it work

Most dark mode implementations are design accidents — light mode with the lightness flipped. Real dark mode design requires different color relationships, different contrast strategies, and different handling of shadows and elevation.

Dark Mode UI/UX Design Systems

Highlights

Inverting a light mode palette produces a dark mode that fails in predictable ways: pure black backgrounds feel harsh, pure white text is too bright for reading in dim environments, and saturated accent colors look neon-aggressive against dark surfaces.

Dark mode elevation works the opposite of light mode: in light mode, shadows get darker to create depth; in dark mode, surfaces get lighter as they rise toward the viewer — no shadows required.

The Dark Mode UI Kit ships with pre-mapped elevation tokens that handle both light and dark themes using the same semantic structure, so switching themes is a token swap rather than a redesign.

Why inversion fails as a dark mode strategy

Inverting lightness values produces a technically dark palette but a perceptually broken one. The problems compound: pure black backgrounds (#000000) create harsh contrast that causes halation — the visual effect where bright text on pure black seems to bleed or glow. This is physically uncomfortable during extended reading in dim environments, which is exactly when users choose dark mode. Second, linear lightness inversion does not preserve color relationships — a warm background with a cool accent inverts to a cool background with a warm accent, which may or may not be visually coherent. Third, saturated brand accents that work on light surfaces look garish and neon-like on dark backgrounds at the same saturation level. Each of these problems requires intentional design decisions, not automatic inversion.

Elevation, depth, and light source in dark interfaces

Light mode interfaces use shadows to simulate elevation — raised elements cast darker shadows against lighter backgrounds. In dark mode, the system inverts: backgrounds are dark, and elements appear to rise toward the viewer by becoming slightly lighter than the background. This is called the 'lightness elevation model' and it is the standard approach in Material Design's dark theme specification. A floating card in dark mode is not a darker shadow on a dark background — it is a slightly lighter surface than the app background, with the lightest elements being the highest-elevated. The Dark Mode UI Kit uses this model: each surface token step represents an elevation level, from app-background (darkest) through card, popover, and modal surfaces (progressively lighter near-black values).

Accent color adjustments for dark surfaces

Brand accent colors rarely transfer from light to dark mode without adjustment. A vivid blue (#0066FF) that reads as a confident, saturated CTA on a white background reads as neon and abrasive on a near-black surface. The standard approach is to desaturate and slightly warm the accent color for dark mode — not enough to lose brand identity, but enough to reduce the perceptual harshness. The target is usually 15-25% saturation reduction paired with a 5-10% lightness increase. Some design systems maintain multiple accent variants: a vivid version for light mode and a muted-vivid version for dark mode, unified under the same semantic token name (action-primary) with different primitive values per theme. This is the approach used in the Dark Mode UI Kit: semantic tokens reference theme-specific primitives, so the accent feels right in both contexts without requiring component-level overrides.

Newer issue

Print vs. screen: why your colors look different and how to manage the gap

2026-12-17

Older issue

Color naming systems: why the words you use for colors shape how teams use them

2027-01-07