Dark mode is not simple inversion
Aliases: invert colors · colour inversion · dark theme
What it is
Run 255 − channel on every pixel of a light dashboard: bars become a photographic negative, faces look like X-rays, card shadows become a glow, and brand yellow turns dirty blue. That is inversion, not dark mode. Dark mode rewrites surfaces as dark neutrals, keeps hues that should stay recognisable roughly on their original hue angle, and leaves photographs and illustration unflipped.
Why it happens
Inversion keeps channel differences and wrecks appearance relationships. Object colours are read as “light is paper, dark is ink”; after the flip, ink is light and paper is dark, so depth cues, skin and sky in photos all parse wrongly. Hue walks as well: yellow’s complement sits near blue, skin goes green-grey. CIE colour-appearance models adapt to the white point and the mean surround luminance; they do not map every stimulus onto its complementary.
Proper remapping is closer to a change of lighting: backgrounds move from high L* to low L*, type from low L* to high L*, brand and data colours travel along lightness while hue angle is held as far as possible. Images and icons that already depict a real scene, or that were authored as assets, should be swapped or matted as wholes, not complemented per pixel.
Studying it
Make three versions of one UI: original light, channel invert, hand remapping. Measure recognition (is this bar still “sales”?), comfort, and whether the brand colour is still named as itself. Independent variables: invert versus plane-by-plane remap, whether images are exempt. Dependent variables: task accuracy, discomfort, hue-name consistency.
Eye tracking can show whether faces and charts are treated as anomalies under invert. Do not treat a contrast number as success — invert often “still has contrast” after the task has already failed.
Where it stops holding
- OS “smart invert” exempts photos and can look like dark mode, yet still flips custom-drawn charts and shadows. That is an assistive switch, not a product theme.
- Sparse wireframe UIs with no photos and no soft shadows are less damaged by invert, but brand colour still lands on its complement.
- OLED pushing the background to true black is a power strategy, not a reason to accept invert as an algorithm.
Applying it
- Remap by role: surfaces, type, brand, data, semantics each get a light→dark pair. Do not ship a page-wide invert filter as the theme.
- Keep photos, avatars and lit illustration as they are in dark theme; add a dark matte if needed, do not complement them.
- Rebuild shadows, inner glows and gradients that depend on “light from above”. They cannot ride the channel flip.
- How to check: park invert beside remap and circle photos, brand colour, charts and shadows. If any of the four reads as a negative, you are still inverting.