Dark Mode

What is dark mode?

Dark mode is a display option that shows light text and interface elements on a dark background. It can be set at the operating system level, in a browser, or inside an app or website. On the web, a site can follow the visitor's system setting through the prefers-color-scheme media feature and let them override it with a toggle.

How it works on the web

• prefers-color-scheme: a CSS media feature with the values light and dark. MDN describes it as detecting whether the user has requested a light or dark theme, from an operating system or browser setting. It is widely available in browsers since January 2020.
• color-scheme: a CSS property, usually set on :root as light dark, that tells the browser which schemes the page supports so it can adapt the canvas, scrollbars and default form controls. It does not restyle the rest of your elements, so you still need your own colors. Widely available since January 2022.
• The meta tag: <meta name="color-scheme" content="light dark"> in the head, before any CSS, lets the browser pick the right page background immediately instead of flashing the wrong one while CSS loads.
• light-dark(): a CSS function that picks one of two colors based on the active scheme, as a shorter alternative to a media query.

<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e8e8e8;
  }
}

body { background: var(--bg); color: var(--text); }

Define colors as variables named by role (such as --bg or --accent), not by hue, so a swap does not leave a "yellow" that no longer reads as yellow.

Benefits and limits

Many people simply find it easier on the eyes, and some users, including people with low vision, need or prefer light text on a dark background. On AMOLED screens, where dark pixels use less power, web.dev cites Android case studies of Google apps such as YouTube with power savings of up to 60%. That figure applies to those screens and apps, not to every site or every display. Claims that dark mode improves sleep are proposals, not settled results.

Example

A SaaS dashboard with charts. In dark mode the white card backgrounds become near-black, text becomes off-white, and the red and green chart colors are re-tuned so they still stand out on the dark surface. A logo with a black wordmark gets a light variant. Without that last step the logo vanishes into the background.

Common mistakes

• Just inverting colors. Photos and brand colors turn out wrong. web.dev suggests softening photos with a filter such as grayscale(50%), and using currentColor for inline SVG icons.
• Pure white on pure black. It is harsh. web.dev's own example uses rgb(250, 250, 250) text on rgb(5, 5, 5).
• Forgetting contrast. WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text, in both themes. Browser default link blue fails on black, as web.dev notes. See accessible color palettes and WCAG.
• No way to override. Follow the system setting by default, but let people choose.
• A flash of the wrong theme. Setting the choice only after JavaScript loads shows a flash on every visit. Use the meta tag, and apply a saved choice early.
• Forgetting third-party widgets and screenshots. Embeds and images made for a light background often look broken on dark.

Dark mode, UX and monitoring

Dark mode is a design and user experience concern, but it can regress like any feature. Check contrast and layout in both themes after each release, and watch the performance side too: a theme script that blocks rendering, or extra CSS per theme, can slow the first paint. LoadFocus page speed monitoring runs scheduled Lighthouse audits, including an Accessibility category, so you can track scores over time. For the wider picture, read performance testing and accessibility metrics.

FAQ

Does dark mode save battery?

Only on screens where dark pixels use less power, such as AMOLED. web.dev cites savings of up to 60% in Android case studies of Google apps. On LCD screens the backlight stays on, so savings are small or absent.

How does a website detect dark mode?

With the prefers-color-scheme media query in CSS, or window.matchMedia("(prefers-color-scheme: dark)") in JavaScript. It reflects the user's operating system or browser setting.

What does the color-scheme property do?

It tells the browser which schemes your page supports, so it can adapt the page background, scrollbars and default form controls. You still style your own elements, for example with prefers-color-scheme or light-dark().

Is dark mode better for accessibility?

It depends on the person. Some, including people with low vision, prefer light text on dark. Others read light backgrounds better. Offer both, and keep contrast high in each.

Should I use pure black?

Usually not. Very dark grey, with slightly off-white text, is less harsh. On AMOLED screens pure black can save more power, so it is a trade-off.