Notes · 2 June 2021
Dark mode without dark mode
Most sites do not need a dark mode. They need a less aggressive light mode.
Most sites do not need a dark mode. They need a less aggressive light mode.
The reason a lot of people switch their devices to dark mode at all is that the default light mode on most websites is being rendered at the equivalent of a fluorescent ceiling tube. Pure white. 100% saturation. Maximum contrast against pitch black. No off-white, no cream, no paper-coloured backgrounds. The eye reasonably reaches for any escape it can find.
The cleanest fix for most small-business sites is not to add a dark mode. It is to set the default light-mode background to something quieter than white. Off-white in the FBF7F0 to FAFAF7 range. Body text at a near-black, around 1A1614, rather than absolute black. The page reads more like a printed book than a hospital corridor. The need for a dark mode goes down. Often the need goes away.
If you do build a dark mode (some sites should: documentation, code-heavy reading, anything used in low-light contexts), three things to get right.
Do not invert the brand. The brand colours, if they were chosen well in light mode, were chosen partly for how they sit on the page. Inverting them produces accidental colours that nobody approved. Pick a separate dark-mode palette that respects the brand without trying to be the brand.
Body text in dark mode should be off-white, not pure white. Around F0EDE7. Pure white text on a black background produces eye strain almost as quickly as pure black on pure white.
The transition between modes should be instant, not animated. The animation feels clever the first time and irritating every time after.
The two best dark modes I have used in the last year, as references: Linear and Vercel’s documentation. Both are restrained. Both treat dark mode as a co-equal version of the brand, not a clever party trick. Stripe’s documentation and GitHub Primer both handle dual-mode systems thoughtfully too, if you want more references.
For the technical side, MDN on prefers-color-scheme and Adam Argyle’s writing on building a dark mode cover the implementation in the depth most articles skip.
Most of the dark-mode briefs I get could be solved with a thirty-minute conversation about why the light mode looks like a hospital. The best dark mode is often the one you do not have to ship.