Web Design
Dark mode: worth building, or a nice-to-have?
It doubles your design surface. When that is justified, and how to do it without doubling the work.
Dark mode is popular with the people who build websites and requested by rather few of the people who use them. That does not make it worthless — it makes it a decision rather than a default.
When it is worth it
- People use the site for long stretches — dashboards, documentation, reading.
- Your audience is technical and expects it.
- Evening use is common, particularly on phones.
- The design has a strong dark identity anyway.
When it is not
- A brochure site visited for ninety seconds.
- A brand built on light, airy, editorial design where the dark version will simply look worse.
- Anywhere the budget would be better spent on speed, copy or accessibility.
If you build it, build it with tokens
The reason dark mode gets expensive is hardcoded colours scattered through the CSS. Define every colour once as a custom property with a role — background, surface, ink, muted, accent, border — then redefine only those properties in the dark block. Done that way it is an afternoon; done by hand it is a week and it drifts.
The three states
Respect prefers-color-scheme, offer an explicit toggle, and remember the choice. A visitor who has chosen light should stay in light even at night. Store the preference and apply it before first paint, or you get a flash of the wrong theme.
What breaks
- Logos with a white background, and PNGs with baked-in white.
- Photographs with light backgrounds, which suddenly glow.
- Contrast: pure white text on pure black is uncomfortable. Use a very dark grey and a slightly off-white.
- Shadows, which do nothing on a dark surface — use lighter surfaces to convey elevation instead.
- Embedded third-party content that stays stubbornly light.
The honest recommendation
Design in one mode properly before adding a second. A site that is excellent in light and absent in dark beats one that is mediocre in both — and half-finished dark modes are conspicuous in exactly the way a careful brand cannot afford.
Working on something like this?
Tell us what you are building — we reply to every enquiry.