Dark Mode Color Strategy: Building Semantic Token Systems That Work in Both Modes

The dark mode failures that produce the worst user experience share a common origin: dark mode was implemented as a transformation of an existing light mode palette rather than designed as a parallel system. Simple inversions (swap background and foreground), tinted neutrals (use the same hue at low lightness), and shifted saturation (desaturate everything) produce results that feel technically functional but visually wrong — because the perceptual relationships that made the light mode palette work do not survive transformation. The fundamental challenge of dark mode color design is that color perception changes significantly as ambient light level and background luminance shift. Colors that appear saturated and vibrant on a light background appear garish or harsh on a dark background at the same saturation level. The same orange that reads as warm and energetic in a light mode context reads as aggressive or alarming against deep navy. Successful dark mode palettes are not translations — they are reimaginings that produce similar emotional and functional effects using different concrete color values. Semantic token systems are the structural solution to dark mode at scale. Rather than defining colors as hex values with names like 'blue-500', semantic tokens are defined by function: 'surface.primary', 'text.primary', 'border.subtle', 'status.error'. Each token is assigned a specific concrete color value per theme. In light mode, 'surface.primary' might be #FFFFFF; in dark mode, it might be #1A1A1A. The components in the system use only semantic tokens — never raw color values — which means theme switching is handled entirely at the token layer. Every component works correctly in both modes without modification. Building a semantic token system for dark mode requires thinking carefully about the roles colors play rather than the colors themselves. Start with the surfaces: how many distinct surface levels do you need (background, card, elevated, overlay)? Define the text hierarchy: primary, secondary, disabled, inverse. Define the interactive states: default, hover, pressed, focus, disabled. Define the semantic status colors: error, warning, success, info. For each of these functional roles, choose a light mode value and a dark mode value that performs the same function in its respective context — even if the values look nothing alike. The result is a system that is genuinely coherent in both modes rather than a dark mode that looks like the light mode under bad lighting.