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

• 01 Content products used late at night. Reading apps, terminal-like tools, anything used in the dark by choice.
• 02 Tools used continuously for hours — IDEs, dashboards, music software, video editors. Reduced eye fatigue under low ambient light is real.
• 03 Apps where battery life matters and the device has an OLED display — dark pixels literally use less power.
• 04 Premium-feeling brands where the dark canvas signals sophistication (think Apple Pro apps, Linear, certain news sites).
• 05 Operational tools where users are watching for signal across many small elements — dark canvases reduce visual noise.

When it doesn't

• 01 Marketing sites where the brand is fundamentally a light brand. Don't flip it for novelty.
• 02 Products used in bright office light all day. Light mode is genuinely easier to read in that context.
• 03 Products 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.
• 04 E-commerce. Shoppers want products on a neutral background. The conversion data on dark-mode shopping flows is consistently worse.
• 05 Long-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

Approximate dark-mode shipping cost by current design-system maturity.

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:

• 01 Re-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.
• 02 Replacing drop shadows with borders or lighter surfaces. Shadows disappear on dark canvases; the depth model has to change.
• 03 Lifting accent colors. A brand orange that pops on white can vibrate uncomfortably on dark; usually a slightly desaturated variant works better.
• 04 Re-tuning images. Hero photography shot for a light context often needs darker treatment for the dark mode version.
• 05 Reconsidering 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

• 01 CSS custom properties for every colour — --color-surface, --color-text, --color-accent. Dark mode flips the values, components stay the same.
• 02 The prefers-color-scheme media query for users who haven't explicitly opted in.
• 03 An explicit theme toggle in the UI for users who want to override their OS setting.
• 04 Persist the toggle in localStorage so the choice survives reloads.
• 05 A data-theme attribute on the 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.