Designing Color Systems That Work in Dark Mode

Dark mode is not a feature — it's a second design system that shares the same semantic token layer as your light mode. Getting it right requires understanding what actually changes between the two contexts. **What Changes in Dark Mode** Contrast relationships reverse. In light mode, dark text on light surfaces creates hierarchy. In dark mode, light text on dark surfaces creates equivalent hierarchy — but the values that work are not simple inversions of the light palette. A background that was gray-100 in light mode becomes something like gray-900 in dark mode, but your accent blue that was blue-600 in light might need to lighten to blue-400 in dark mode to maintain 4.5:1 contrast against the dark surface. Shadow becomes elevation. In light mode, shadows go dark (slightly toward black) to simulate depth. In dark mode, shadows need to go slightly lighter than the background, or use subtle glow/gradient treatments, because a dark shadow on a dark surface is invisible. Many dark-mode implementations skip this entirely, creating visually flat interfaces. **The Palette Split** Professional dark mode palettes maintain separate light-mode and dark-mode color sets connected at the semantic token layer. The token 'color.surface.default' points to gray-50 in light mode and gray-950 in dark mode. The token 'color.text.primary' points to gray-900 in light and gray-50 in dark. The semantic name is constant; the raw color value is context-specific. **Saturation Adjustments** Colors that read correctly at a given saturation in light mode often need saturation reduction in dark mode. A vivid cobalt-600 on white reads as a confident brand blue. The same cobalt-600 on a near-black surface can read as harsh and neon. Good dark-mode accent colors are typically 1-2 steps lighter and slightly less saturated than their light-mode equivalents. **Testing Dark Mode** Test in actual dark conditions. Many dark mode failures are invisible on a bright monitor in a lit room but obvious on a phone at night. The APCA (Accessible Perceptual Contrast Algorithm) accounts for dark-mode perception more accurately than WCAG 1.4.3 for this reason.