Dark Mode is Not Just Inverting Your Palette

Most dark mode implementations fail at the same stage: inverting light-mode colors without rethinking what they communicate. Pure white text on pure black background (#FFFFFF on #000000) has 21:1 contrast — technically perfect and perceptually exhausting. OLED screens achieve true black (each pixel off), which makes extreme-contrast designs feel jarring rather than premium. Good dark mode design starts from a different emotional premise: low ambient light contexts reward lower overall luminance, reduced color saturation, and warmer neutral tones in content areas. Apple's dark mode uses a near-black gray (#1C1C1E) rather than true black for most surfaces, reserving black for borders and elevated surface outlines. This layering — base, surface, elevated, overlay — creates depth without high contrast that fatigues. The semantic token approach makes dark mode systematic. Instead of `color: #1a1a1a` in light mode and `color: #f5f5f5` in dark mode, you define `color: var(--text-primary)` and let the token resolve differently per theme. Your component never needs to know which theme it's in. This approach scales: adding a third theme (high-contrast, or brand-specific) requires only a new token value set, not touching component code. Saturation shifts matter too. Colors that feel vivid and clear in light mode often look neon or synthetic in dark mode because there's less surrounding luminance to anchor them. Dark mode palettes typically use slightly lower saturation versions of the same hue — or shift toward slightly warmer or cooler endpoints to maintain visual weight without harshness.