Dark Mode Color Design: Why You Can't Just Invert Light Mode

The first mistake in dark mode design is treating it as a luminance inversion of light mode. In light mode, a white background with a dark blue text creates a clear figure-ground relationship. Inverting this produces a black background with a light blue text — which does not behave the same way perceptually. Black backgrounds have a 'sinking' quality: highly saturated colors placed on black appear more saturated and more vivid than the same color on white. A medium-saturation blue that reads as a professional, controlled brand color on white can look garish or aggressive on a true black background. This is why virtually all well-designed dark modes use dark gray backgrounds (iOS dark mode is approximately #1C1C1E, not #000000) — the dark gray reduces the perceived saturation amplification of foreground colors. Text in dark mode requires lower contrast than the same text in light mode for comparable perceived legibility, for a physiological reason. In bright environments (light mode), the eye's pupil constricts, increasing depth of field and making edges sharper. In dark environments (dark mode), the pupil dilates, which decreases depth of field and introduces slight blurring at high-contrast edges. This is why very high contrast text (pure white #FFFFFF on true black #000000) appears to 'bloom' or 'glow' in dark mode — the pupil dilation and edge blurring make the high-luminance white text appear to bleed into the dark background. Most dark mode text systems reduce text luminance to 85-90% (approximately #E0E0E0 to #F0F0F0) rather than pure white to reduce this blooming effect. Color hierarchy is harder to maintain in dark mode because the primary mechanism of light-mode hierarchy — using light-to-dark value contrast to indicate importance — is inverted. In light mode, you draw attention by using a darker, more saturated color against a lighter background. In dark mode, you draw attention by using a lighter or more saturated color against a dark background. The same semantic meaning maps to opposite lightness values, which means dark mode color systems cannot reuse the same hierarchy logic with different values — the relationship must be redesigned. Elevation in dark mode (used by Android Material Design and Apple HIG) communicates visual hierarchy through slightly lighter surface colors at higher elevations, not through shadow depth alone, because shadows are invisible against dark backgrounds. Brand colors need a dark mode variant. A brand color that was chosen for light backgrounds may be too saturated or too dark for effective use on dark backgrounds. The practical solution is to designate a 'light' and 'dark' variant of each brand color — not simply a lighter version, but a hue-adjusted variant that maintains the brand's color feel while functioning correctly in the dark context. Automated tools that generate dark mode palettes by adjusting only lightness (without also adjusting saturation and sometimes hue) produce dark modes that technically have correct contrast ratios but feel wrong to trained eyes.