Dark mode is now a baseline expectation for digital products, but the majority of implementations are poor — either straight palette inversions that look like afterthoughts, or hand-crafted systems that feel like a different product. Good dark mode is a distinct color system built on different principles: human vision under low ambient light, elevation expressed through lightness rather than shadow, and saturation calibrated to prevent visual vibration on dark backgrounds.
A naive dark mode inverts the light palette: white backgrounds become near-black, dark text becomes near-white. This fails because the modes have asymmetric perceptual requirements. Light mode's challenge is legibility on high-reflectance surfaces. Dark mode's challenge is managing contrast so text is readable but not harsh, colors vivid but not aggressive, and spatial hierarchy communicated through lightness rather than shadow.
Depth in dark mode is expressed through surface lightness levels: darker surfaces recede, lighter surfaces advance. A standard system: base background L:10-12%, sidebars L:14-16%, cards L:17-20%, modals L:22-26%, tooltips L:26-30%. The 3-5 point differences are subtle but perceptually clear as the primary available depth cue. Surface borders at L:25-30% and separators at L:20-22% complete the system. Android Material Design and Apple HIG both specify elevation-based dark surfaces along these principles.
Each brand color needs individual re-calibration. Blues and cyans need 20-30% saturation reduction. Reds and oranges need only 10-15%. Greens often benefit from a 3-5° cooler hue shift in addition to saturation reduction. Yellows are the hardest — full-saturation yellow on dark backgrounds is practically unusable. Dark mode warning colors are almost always redesigned as amber-orange rather than adapted from light mode yellow.
Semantic colors (success green, warning amber, error red, info blue) must maintain legibility in both modes while individually calibrated. The key constraint: all four must be distinguishable for color-vision-deficient users in both modes. In dark mode: success green shifts lighter and slightly teal; warning shifts to amber-orange; error red shifts slightly lighter; info blue must be distinguishable from the dark background without neon brightness. Test the full semantic palette with the WCAG Audit tool for each mode.
Define light mode colors in :root { } and override in @media (prefers-color-scheme: dark) :root { } for automatic OS detection. For manual toggle: apply data-color-scheme='dark' to <html> and target [data-color-scheme='dark'] alongside the media query. Semantic token names: --surface-base, --surface-raised, --surface-overlay, --text-primary, --text-secondary, --border-default. Each token maps to different values per mode. This allows components to be authored once while responding correctly to both color schemes.
