Dark Mode Is Now a Baseline Expectation
Dark mode has crossed the threshold from feature to expectation. Over 55% of users now prefer dark mode as their primary interface setting across mobile and desktop. Operating systems default to it. Major applications support it. Users who encounter a product that does not support it in 2025 notice its absence as a quality signal, the same way a missing mobile experience was noticed in 2018.
Most brands that have implemented dark mode have done so as a surface-level toggle, they have inverted their color palette and called it done. This produces interfaces that technically work in dark mode but that lose visual coherence, brand consistency, and in some cases, accessibility compliance. Building a genuine dark mode system requires rethinking the color architecture from the ground up.
Why Simple Inversion Fails
The instinct to create dark mode by inverting light-mode colors fails for several predictable reasons. Colors that read beautifully on a white background, warm ambers, vibrant oranges, saturated blues, become visually aggressive or illegible on near-black. Shadows, which create depth in light mode, need to be replaced with light sources in dark mode. Text contrast relationships that pass WCAG in light mode often fail in dark. And brand colors that were calibrated for light backgrounds look entirely different on dark ones.
The Elevation Model
In light mode, depth is communicated through shadows, elements closer to the viewer cast more shadow. In dark mode, this model inverts: elements at higher elevation are lighter, not darker. This is Material Design's elevation model, and it is the correct approach for building a coherent dark mode UI. Without this model, dark mode interfaces tend to look flat and undifferentiated.
"Dark mode is not light mode with the lights off. It is a different visual environment that requires its own design decisions."
Building a Dual-Mode Design System
Semantic Color Tokens
The foundation of a dual-mode design system is semantic color tokens, tokens defined by their purpose rather than their value. Instead of using `#ffffff` directly, you use `--color-surface-primary`, which resolves to `#ffffff` in light mode and `#0a0a0a` in dark mode. This abstraction makes mode-switching reliable and predictable at scale.
Testing for Accessibility in Both Modes
Every component needs to pass a 4.5:1 contrast ratio in both modes before it ships. This is non-negotiable, and it is frequently skipped. The most common failures are muted text colors that pass in light mode and fail in dark, and icon colors that become invisible against dark backgrounds. Run every component through a contrast checker in both modes, every time.
Dark Mode as Brand Expression
The most sophisticated dark mode implementations are not just functional equivalents of the light mode, they feel like a different, equally intentional expression of the brand. The way shadows work, the way accent colors behave, the weight of the typography, all of these can be calibrated to produce a dark mode that has its own distinct character while remaining coherent with the light mode brand.
Brands that have done this well, Linear, Vercel, Raycast, have made their dark mode interfaces into a statement of quality and attention to detail. In a market where surface-level dark mode is increasingly common, a genuinely well-executed dark mode system is a differentiator.
