Should dark mode be a true inversion, or designed separately?

Dark mode should be designed separately, as its own deliberate theme, not produced by inverting the light one. A literal flip is tempting because it looks like a single switch, but pure inversion reliably breaks the things that made the light design work: contrast lands wrong, depth cues reverse in ways that confuse rather than clarify, and brand colors tuned for light surfaces turn harsh or muddy on dark ones. The better mental model is a parallel theme that shares structure with light mode but recalibrates surfaces, text, and accents for a dark environment.

The reasoning starts with how light and dark interfaces actually behave for the eye. On a light interface, shadows imply elevation, lower layers sink, raised ones cast soft darkness, and the page feels physical. Invert that and shadows become light, which the eye does not read as elevation at all, so depth has to be rebuilt in dark mode with lighter surface tints for higher layers instead of shadows. Text is the second trap. Pure black on white can be flipped to pure white on black, but full-strength white on a dark field glares and smears, so dark mode wants a slightly softened off-white and often reduced weight to feel comfortable. Accents are the third: a saturated color that looked rich on white frequently looks neon or dull on near-black, because perceived saturation and contrast change with the background, so the accent needs to be lightened or desaturated to read the same way it did before.

A concrete failure shows why the switch approach disappoints. Take a clean light app with a white background, soft gray cards lifted by subtle shadows, navy text, and a deep brand blue for buttons. Invert everything programmatically and you get a black background, “cards” that are now lighter than the page with shadows that glow, glaring white text, and a brand blue so dark against black that the buttons nearly disappear. Each color is technically the mathematical opposite of its light counterpart, yet the hierarchy has collapsed, the buttons are hard to find, and the screen feels cheap. The separately designed version keeps the same layout but uses a very dark gray base, slightly lighter gray surfaces to signal elevation, an off-white for body text, and a brightened, slightly desaturated blue so the buttons still command attention.

The catch is that “designed separately” does not mean two unrelated designs maintained by hand. The two themes should share the same structure, spacing, and semantic roles, and a well-built token system lets most of the work flow through mapped values rather than per-screen redesign, so what you are really doing is defining a second set of role values, not redrawing every screen. Some elements also can map cleanly across both modes, and a few brand colors may survive untouched. The point is that those values are chosen for dark mode on their own merits, not assumed from a flip.

When you take on dark mode, build it as its own theme: start from a dark base rather than a flipped white, rebuild elevation with surface tints instead of shadows, soften your text off pure white, and recheck every accent against the dark background, adjusting any that glare or recede. Wire it through shared tokens so the two themes stay in sync, and treat the dark palette as a design decision in its own right rather than the negative image of the light one.