Dark Mode

011 min

Why a quick swap does not make a good dark mode

Picture a design team at a note-taking app. Customers write late at night, and support keeps hearing that the white screen is painful in a dark room. The team agrees to ship a dark version. A developer sets every background to black and every text colour to white, and the build is ready the same afternoon.

Then the testers find problems. Links that were clear on a white page are hard to see on black. The soft shadows under the cards are gone, so the cards no longer look raised. Photos with white backgrounds look too bright against the dark page. Some testers also find the pure white text on pure black tiring to read.

Each problem has a cause, and the sections below take them in order. The main lesson is that a dark version is not the light design with its colours reversed. It is a second set of colour decisions, made for a different way of viewing a screen.

021 min

Where dark mode comes from

The team's first doubt is whether dark mode is a passing fashion. The record says it is not. Microsoft put a dark theme in Windows 10 in 2016. Apple followed in macOS Mojave in 2018. In September 2019, Apple's iOS 13 and Google's Android 10 each gained a dark setting for the whole system. Web developers also got a way to read that setting in 2019, called the prefers-color-scheme media query, which is a style rule that checks whether the person chose light or dark.

Dark screens before light ones

Dark was how screens started, and designers did not choose it. Early cathode-ray tube displays could not light a whole screen without wearing out, so text appeared as green, white or amber letters on black. Light backgrounds came later, with the graphical interfaces of the 1980s. Their designers wanted the screen to look like the paper people already used, and a light background copied it. Dark mode returns to the old look, now as a setting, on screens that can show either.

033 min

What research says about reading in dark mode

Next the testers argue about which version is easier to read, so the team looks for studies. Raluca Budiu of Nielsen Norman Group reviewed the research in 2020. Her group ran no tests of its own, but the review is a clear summary of who found what.

The first finding favours the light version. In a 2013 study, Cosima Piepenbrock and colleagues in Düsseldorf, Germany, tested adults aged 18 to 33 and 60 to 85 with healthy eyes. Each person did a sight test and a proofreading task, shown either as dark text on light or as light text on dark. Light mode, which means dark text on a light background, did better for both age groups, on the sight test and on proofreading. The same research group later found that the gap grows as the text gets smaller. Tiredness ratings did not differ between the two, and the participants did not notice any difference in how readable the text was. How a screen feels is a poor guide to how well people read on it.

The second finding is that the light in the room changes the result. Jonathan Dobres and colleagues at MIT's AgeLab showed people short letter strings and asked whether each one was a word. In simulated daylight, the choice of colours made no significant difference. At simulated night, light mode gave better results than dark mode, and small text was the hardest case. The review points to the pupil as the likely reason. In bright light the pupil narrows, and a narrow pupil gives a sharper image. In dim light it widens and the image blurs more. Researchers call this ease of recognising letters legibility.

The third finding favours dark mode for some readers. In 1985, Gordon Legge and colleagues at the University of Minnesota tested seven people whose eye lenses were cloudy, for example from cataracts. Each read faster with light text on dark. People with central vision loss were not affected. Legge's team believed that light scatters inside a cloudy lens, so a screen that gives off less light causes less blur. The tests used older CRT screens, so the result needs care when applied to modern displays.

042 min

Does dark mode save battery?

Marketing asks the team to say that dark mode saves battery. Whether that is true depends on the screen.

An OLED screen (organic light-emitting diode) makes light in each of its tiny dots, so a dot that shows black uses almost no power. An LCD screen keeps a backlight on behind all its dots, so showing black saves little. On a 2016 Google Pixel, white at full brightness used about six times the power of pure black. Pure black also saves little beyond dark grey. On an AMOLED screen the extra saving is under 1% compared with the dark grey Google uses in its own Android apps.

051 min

Is dark mode worth building?

With mixed evidence and a real cost, the team must decide whether dark mode is worth the work. People give their own reasons for wanting it: working late, sitting in a dim room, having eyes that find bright light painful, or using a phone on a bus without lighting up the faces of the people nearby. The reasons differ, which is why the choice is usually left to the person.

The cost depends on how the app was made. Braze, a marketing platform company, notes that colours taken from the platform's defaults switch automatically. If an app uses its own brand colours, developers must supply a second set for each one, and designers and testers must check the result. The work is shared. Designers choose the colours and contrast, developers make the switch work, and a project manager makes sure accessibility is covered.

Braze also advises starting small. Designers sketch a dark version, engineers estimate the effort, and after release the team checks how many users switch it on and watches reviews and satisfaction scores for a change. A cheap sketch answers the question of cost before anyone commits to the full build.

062 min

How to design a dark mode palette

Back at the app team, the developers find that most problems in the first attempt have known fixes. The table lists them, from the first attempt to a better choice.

The ratios in the table are computed with the WCAG formula. WCAG 2.2 success criterion 1.4.3 requires at least 4.5:1 for normal text and 3:1 for large text, in every theme. Contrast is measured from brightness, not hue, so a colour that passes on white can fail on black. The light theme passing tells nothing about the dark one, so each pair is checked again. That is the contrast work.

Teams also avoid fixed colour values. Android names colours by role, and its textColorPrimary attribute is near-black in the light theme and near-white in the dark theme. The same screen then works in both.

Elevation overlays

On a light page, a shadow tells the eye that a card sits above the page. Material notes that shadows show up poorly on dark backgrounds. Its first answer was to make surfaces lighter as they rise, by laying a see-through tint on top whose strength grows with height. Material has since moved to tonal surface colours, but the rule stays the same: the higher the layer, the lighter it is. The rule keeps the visual hierarchy clear without shadows.

072 min

Building dark mode for the web and for apps

A palette still has to reach the screen. On the web, a page reads the person's choice with the prefers-color-scheme media query. Its value is either light or dark, and light also covers a person who has set no preference. A page can start with light colours and override them for dark, or start dark and override them for light.

081 min

Letting people choose between light and dark mode

With two themes built, the team must decide who controls the switch. Android's documentation recommends three options in an app: Light, Dark and System default, and it names System default as the recommended starting choice. The reasoning is that people have already chosen a setting for their whole device, and an app that ignores it makes them choose twice.

The designer Stephanie Walter argues that following the system alone is not enough. Some people keep a dark system but cannot read light text on dark pages, for example because of astigmatism. They need a light page even though the rest of their device is dark. Her answer is to offer both modes and let each person pick.

Some operating systems also switch themes on a schedule, at sunset and sunrise, so one person may see both versions in a single day. Together these points lead to one rule: follow the system by default, and give a visible control to override it.

091 min

When dark mode makes reading harder

The override matters because dark mode helps some readers and hurts others. Four groups need particular care.

• Astigmatism. Astigmatism is an eye shape that blurs focus. In high-contrast displays, some people with astigmatism see a glowing edge around letters, called halation. Off-white on dark grey softens the contrast, which is one more reason for the choices in the palette table.
• Dyslexia. The Bureau of Internet Accessibility (BOIA) notes that people with dyslexia can find total contrast, such as white on black, hard to read. It adds that many prefer lighter backgrounds with enough contrast, though not all do.
• Keyboard users. People who move through a page with the keyboard rely on a focus indicator, the outline that shows where they are. A dark background can hide an indicator that was designed for a light one.
• Small text in dim rooms. The MIT AgeLab result above means that small light text on a dark screen at night is the hardest case to read.

A site that offers only a dark theme gives these readers no alternative. This is also why an accessibility check belongs to the dark theme as well as the light one.

101 min

Dark mode vs. nearby concepts

Three nearby things are often mixed up with dark mode.

Dark mode and sleep

Some guides say dark mode helps sleep because it gives off less blue light. The evidence does not settle this. In 2019, Tim Brown and colleagues at the University of Manchester tested mice with lights whose colour changed while their brightness stayed fixed. In mice, blue light of the same brightness changed the body clock less than yellow light did. The team suggested that dim, cooler light in the evening may be a better choice than warm light. The study did not test dark mode, so it does not show that dark mode helps or harms sleep.

?4 questions

Questions people ask

§16 sources

Sources