Dark Mode

A color theme that uses dark backgrounds with light foreground content, designed to reduce eye strain in low-light environments and suit user preference.

What is Dark Mode?

Dark mode is a UI color theme where surfaces use dark or black backgrounds and text and UI elements are rendered in light colors. It is the inverse of the traditional light-mode (or "day mode") design, which uses light backgrounds with dark text.

Dark mode became mainstream with OS-level support in macOS Mojave (2018) and iOS 13 (2019), and the introduction of the prefers-color-scheme CSS media query, which lets websites automatically adapt to the user's system preference. Building a color palette with dark mode in mind from the start is key to a polished implementation.

Why is Dark Mode important?

Dark mode matters for several reasons. It can reduce eye strain in low-light environments, as staring at a bright white interface in a dark room creates significant contrast between the screen and the surroundings. For OLED screens, dark mode can also save battery by powering off individual pixels that display true black.

From a design perspective, dark mode expands the range of visual expression available to a product. Many users simply prefer dark mode aesthetically, and offering it signals a polished, modern product. For developer tools, code editors, and creative software, dark mode has become the expected default.

How to implement Dark Mode for color palettes

Dark mode is not simply an inverted version of light mode. Naively inverting colors produces poor results: pure white text on pure black is uncomfortably high contrast ratio, colors shift emotionally, and shadows stop working logically (since shadows imply a light source above).

Best practices for dark palette design:

Use dark grays, not pure black: Pure black (#000000) is rarely used in dark UIs. Most dark surfaces use very dark grays like #0a0a0a or #18181b.
Reduce text color to off-white: White text on a dark background can feel harsh. Use a near-white like #f4f4f5 or #e4e4e7 for body text.
Desaturate colors: Highly saturated colors can feel neon and visually aggressive against dark backgrounds. Reduce saturation and increase lightness slightly for primary and accent colors.
Preserve lightness hierarchy: The relative order of surface lightness should be maintained. Cards should be lighter than the page background, and elevated surfaces should be lighter than cards.
Implement via color tokens: Map semantic tokens (like color.background.page) to different base palette values for dark mode, rather than hardcoding values per component.

Examples

In practice, a dark mode page background token might map to:

Light mode: gray.50 (#fafafa)
Dark mode: gray.950 (#09090b)

And a primary action color:

Light mode: blue.600 (#2563eb), passes 4.5:1 on white
Dark mode: blue.400 (#60a5fa), needed because lighter text requires a lighter blue to pass contrast on dark backgrounds

Best practices

Always check WCAG contrast ratios in both light and dark themes. Passing in one doesn't mean passing in the other
Avoid simply inverting your light palette. Build dark mode token mappings deliberately
Use elevation through lightness in dark mode: surfaces that are "higher" (modals, tooltips) should be slightly lighter than the background
Consider supporting prefers-color-scheme: dark alongside a manual toggle so users can override the system setting

FAQs

It depends on context. In dim or dark environments, dark mode can reduce glare and eye strain compared to a bright white screen. In bright environments, however, dark mode can actually make text harder to read because the ambient light washes out the low-contrast dark interface. The 'best' mode depends on the user's environment and individual preference.

If you can support it well, yes, especially for developer tools, creative applications, or any product used in low-light contexts. A poorly implemented dark mode is worse than none because it signals that the theme is an afterthought. If you can't implement it properly at launch, a quality light-only experience is better than a broken dark mode. Build your semantic token layer from the start so dark mode can be added cleanly later.

Use the `prefers-color-scheme` media query: `@media (prefers-color-scheme: dark) { ... }`. You can also set CSS custom properties (tokens) inside the media query, then all components that reference those tokens will automatically adapt. In React, the `useMediaQuery('(prefers-color-scheme: dark)')` hook or similar provides access to the preference in JavaScript.