The adoption of dark mode across major operating systems and applications has transformed it from a developer preference into a mainstream user expectation. Apple, Google, and Microsoft all offer system-level dark mode, and users increasingly expect the applications they use to respect this preference.
The business case for dark mode support is straightforward. Users who prefer dark mode and encounter a light-only application experience visual discomfort, particularly in low-light environments. This discomfort translates directly into reduced engagement time and, in competitive markets, application switching.
But implementing dark mode effectively is considerably more complex than applying a CSS filter or inverting colour values. A well-designed dark mode requires deliberate decisions about colour, contrast, elevation, imagery, and typography that differ fundamentally from light mode design.
Why Inversion Fails
The most common approach to dark mode — inverting the colour scheme so that dark backgrounds replace light ones and light text replaces dark text — produces technically functional but visually problematic results.
The primary issue is contrast. In light mode, the full range of the luminance spectrum is available for creating hierarchy: pure white backgrounds, light greys for secondary surfaces, medium greys for borders, and dark text. In dark mode, the usable luminance range is narrower. Pure black backgrounds cause excessive contrast with white text, producing eye strain during extended reading. And the dark end of the spectrum offers fewer distinguishable values for creating surface hierarchy.
The Elevation Model
Material Design's approach to dark mode hierarchy uses surface elevation rather than colour lightness to communicate depth. Higher-elevation surfaces (modals, cards, dropdowns) use lighter shades of the dark background colour, creating a sense of layered depth. This approach maintains visual hierarchy without relying on the broad luminance range available in light mode.
The practical implementation uses a base dark colour (not pure black — typically a very dark grey with a slight colour tint) and progressively lighter variants for each elevation level. The difference between levels should be subtle but perceptible: approximately 5-8% lightness increase per elevation step.
Colour Adaptation
Brand colours that work well on light backgrounds often need adjustment for dark mode. Saturated colours that provide appropriate contrast on white backgrounds can appear harsh and vibrating on dark backgrounds. The solution is to reduce saturation and increase lightness for primary brand colours in dark mode, maintaining brand recognition while ensuring visual comfort.
Secondary and accent colours require similar adjustment. The goal is not to change the brand's colour identity but to adapt it to a different perceptual context. A brand blue that is vivid and energetic on white becomes aggressive and fatiguing on dark grey unless its saturation is moderated.
Semantic Colour Consistency
Semantic colours — those that communicate meaning rather than brand identity — must maintain their semantic associations across modes. Error states should remain red-coded, success states green-coded, and warning states amber-coded. However, the specific values need adjustment to maintain appropriate contrast ratios against dark backgrounds.
Typography in Dark Mode
Text rendering differs between light and dark modes in ways that affect readability. Light text on dark backgrounds appears heavier than dark text on light backgrounds due to a perceptual phenomenon called irradiation. This means that font weights that are appropriate for light mode may appear too heavy in dark mode.
The practical solution is to reduce font weight slightly in dark mode — using a 350 or 380 weight instead of 400 for body text, for example. Alternatively, slightly reducing the opacity of body text (to approximately 87% rather than 100%) achieves a similar visual effect without requiring separate font weight specifications.
Image and Media Handling
Images designed for light mode contexts can appear jarring in dark mode interfaces. Product photos on white backgrounds create harsh contrast rectangles. Illustrations with light colour palettes clash with dark surroundings. Screenshots of light-mode interfaces break the visual consistency.
The most effective approach is to provide alternative image assets for dark mode where possible, particularly for illustrations and graphics. For photographic content, applying a subtle darkening overlay or reducing brightness by 10-15% helps images integrate with the dark mode context without significantly altering their content.
Implementation Architecture
The technical implementation of dark mode should use CSS custom properties (variables) as the colour abstraction layer. Define semantic colour tokens (background-primary, text-secondary, border-subtle) rather than literal colour values, and swap the underlying values based on the active mode.
This architecture enables mode switching without changing any component-level CSS, ensures consistency across the entire interface, and makes it straightforward to adjust the dark mode palette globally without touching individual components.
Respect the user's system preference via the prefers-color-scheme media query, but also provide an explicit toggle that allows users to override the system setting. Store the user's explicit preference and apply it on subsequent visits.