The OLED constraint
On OLED screens, each pixel produces its own light — pure black (#000000) means a pixel that consumes zero power and emits zero photons. This creates extreme contrast between dark backgrounds and bright text that feels jarring in most UI contexts, despite the technical contrast ratio being ideal (21:1 with white). Apple's dark mode uses #1C1C1E as its primary background rather than true black, using black only for borders, modals, and elevated surface outlines. This surface-layering approach creates depth without the harshness of maximum contrast.
Semantic tokens make dark mode scale
Without semantic tokens, dark mode means touching every component: overriding colors in dozens of CSS rules, maintaining two parallel stylesheets, and inevitably missing things. With semantic tokens, dark mode is a theme file: '--surface-default' is #ffffff in light mode and #1C1C1E in dark mode; '--text-primary' is #111 and #F5F5F5. Your components reference semantic tokens and are automatically correct in both themes. Adding a high-contrast or system-matched theme is just another token value set.
Saturation management
Colors that work in light mode — vivid blues, rich greens, warm reds — often look neon or synthetic in dark mode. In light mode, surrounding light anchors saturated colors and makes them feel grounded. In dark mode, the same saturation appears to glow. Standard practice is to reduce saturation 10-20% for dark-mode palette variants, sometimes shifting hue slightly toward cooler or warmer endpoints to maintain perceptual warmth. Your brand colors will need tested, calibrated dark-mode variants — not just the light-mode values on dark backgrounds.
Surface elevation in dark mode
Light mode creates depth through shadows (dark overlay on light backgrounds). Dark mode cannot do this — you cannot shadow a dark surface darker. Instead, elevation is communicated through lightness: higher surfaces are lighter in dark mode. Apple's iOS uses a progression from #1C1C1E (base) through #2C2C2E (card) to #3A3A3C (elevated) to #48484A (modal/overlay). This lightness-as-elevation pattern is now standard and expected — deviating from it creates surfaces that feel flat and unanchored.
Common dark mode failures
The most common dark mode failures: using pure black as the base background (harsh, fatiguing), injecting unmodified light-mode accent colors into dark surfaces (neon/synthetic result), insufficient contrast for text states (disabled text vs secondary text become indistinguishable), and forgetting that images with white backgrounds look wrong on dark UI. Well-implemented dark mode often requires separate image variants for illustrations and screenshots with white or near-white backgrounds. Dark mode is a design system feature, not a CSS filter.
