---
title: "Dark mode is everywhere. Should every product ship one?"
date: 2019-04-22
url: https://remiam.co.uk/notes/dark-mode-everywhere
tags: [Design, Dark Mode, Product, Design Systems]
read_time_minutes: 8
description: "When dark mode is worth shipping in a product, when it is not, and the design-system work that has to happen before you ship one properly."
---

# Dark mode is everywhere. Should every product ship one?

*Published 2019-04-22 · 8 min read · by Liam (Remiam)*

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

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

## When it doesn't

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

| 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 |

*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:

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

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

## References

1. [Apple — Dark Mode design guidance](https://developer.apple.com/design/human-interface-guidelines/dark-mode)
2. [Material Design — Dark theme guidelines](https://m3.material.io/styles/color/dark-theme/overview)