Adaptive Color: Building Systems That Work in Both Light and Dark Mode

Dark mode is no longer an optional feature — it is an expected capability of any production design system. The challenge is that a palette designed for light mode does not simply invert to work in dark mode. The perceptual properties of color change radically between light and dark contexts: colors that are muted and restrained on a white background become vivid and aggressive on a dark background; contrast relationships that provide clear hierarchy in light mode can become insufficient or excessive in dark mode. Building a system that works in both requires designing for both contexts from the start. The structural foundation of an adaptive color system is the semantic token layer. Rather than assigning specific color values to components (background: #f8f8f8), semantic tokens define roles (background: surface-primary), and the color values assigned to those roles change per mode. This means the component code never changes when switching modes — only the token values change. In practice, this architecture requires defining a complete surface palette for both modes: background colors, elevated surfaces, borders, and overlays all need dark-mode equivalents that maintain the same structural relationships under reversed lighting conditions. The most critical translation challenge between modes is the surface layer stack. In light mode, surfaces are differentiated by adding gray (each elevation adds a small amount of gray to a white base). In dark mode, the convention reverses: surfaces are differentiated by adding white (each elevation adds a small amount of white to a dark base). The practical result is that cards, modals, and popovers appear lighter than the page background in both modes — the elevation system works through the same perceptual principle (elevated surfaces reflect more light) but through opposite color operations. Brand colors rarely translate directly between modes without adjustment. A cobalt brand color at full saturation reads well on a white background but appears harsh and high-contrast on a very dark background. The adaptive approach is to define tonal variants of each brand color: a lighter, slightly desaturated variant for dark mode contexts where the full saturation creates too much vibration against the dark surface. Some design systems define three variants per brand color — dark-mode-primary, light-mode-primary, and neutral-primary for shared surfaces — allowing fine-grained control without overcomplicating the token structure. Accessibility in adaptive systems requires contrast evaluation in both modes independently. A text color that passes 4.5:1 against a light background may fail against a dark background if the dark-mode text value was chosen by visual judgment rather than computed contrast. Automated contrast checks should run against both the light and dark token sets as part of the build process — any failure in either mode should block deployment.