Dark mode is everywhere. Should every product ship one?
macOS Mojave shipped it. iOS 13 is about to. Android Q is on the way. Every client meeting now ends with 'and a dark mode'. Here is our answer when it does — and the design-system work that has to happen first if the answer is yes.
Dark mode hit macOS in September 2018. iOS 13 is bringing it system-wide later this year. Android Q is on the way. Suddenly every product team is asking us about it, and every client wants to know what 'shipping a dark mode' would actually cost. Some honest thinking on what we tell them.
When dark mode actually earns its keep
- 01Content products used late at night. Reading apps, terminal-like tools, anything used in the dark by choice.
- 02Tools used continuously for hours — IDEs, dashboards, music software, video editors. Reduced eye fatigue under low ambient light is real.
- 03Apps where battery life matters and the device has an OLED display — dark pixels literally use less power.
- 04Premium-feeling brands where the dark canvas signals sophistication (think Apple Pro apps, Linear, certain news sites).
- 05Operational tools where users are watching for signal across many small elements — dark canvases reduce visual noise.
When it doesn't
- 01Marketing sites where the brand is fundamentally a light brand. Don't flip it for novelty.
- 02Products used in bright office light all day. Light mode is genuinely easier to read in that context.
- 03Products without a real design system. Dark mode is twice the design work — if you don't already manage color tokens properly, doing it for the first time at the same time you add dark mode is painful.
- 04E-commerce. Shoppers want products on a neutral background. The conversion data on dark-mode shopping flows is consistently worse.
- 05Long-form reading material aimed at general audiences. Black-on-white still beats white-on-black for most readers most of the time.
The cost, broken down
| Project state | Dark-mode effort | What's involved |
|---|---|---|
| Mature design system with tokens | 1-2 weeks | Add dark palette, audit components, swap shadows for borders |
| Loose system, ad-hoc colors | 4-8 weeks | Token everything first, then dual-palette work begins |
| No system, every page bespoke | 3-6 months | Effectively a full design-system rebuild before dark mode is possible |
| Highly imagery-driven brand | 2-3 weeks plus art-direction | Photography often needs reshooting / re-grading for dark contexts |
Doing it right — what 'a real dark mode' means
A real dark mode isn't 'invert the colors'. It's a parallel palette where contrast, hierarchy, and accent colors all get re-tuned for a dark canvas. The work involves:
- 01Re-grading every brand color so it remains accessible on a dark background. Pure white text on pure black is too high-contrast and tiring; #ffffff on #0a0a0a is a common landing point.
- 02Replacing drop shadows with borders or lighter surfaces. Shadows disappear on dark canvases; the depth model has to change.
- 03Lifting accent colors. A brand orange that pops on white can vibrate uncomfortably on dark; usually a slightly desaturated variant works better.
- 04Re-tuning images. Hero photography shot for a light context often needs darker treatment for the dark mode version.
- 05Reconsidering icon weights. Crisp 1px icons on white sometimes need slightly heavier strokes to read on dark.
A dark mode is the moment your design system either pays you back or sends you a bill. If you've been disciplined, it's a fortnight of work. If you haven't, it's a project that quietly forces you to fix everything else first.
Implementation patterns we like
- 01CSS custom properties for every colour — --color-surface, --color-text, --color-accent. Dark mode flips the values, components stay the same.
- 02The prefers-color-scheme media query for users who haven't explicitly opted in.
- 03An explicit theme toggle in the UI for users who want to override their OS setting.
- 04Persist the toggle in localStorage so the choice survives reloads.
- 05A data-theme attribute on the <html> element as the override mechanism — easy to read in CSS, easy to query in JavaScript.
If a client wants dark mode done in a week, the answer is 'not really'. If they want it done in a month with proper tokens behind it, the answer is yes — and it'll improve their design system for everything else too. Dark mode is a forcing function. Embrace what it forces.