Dark mode

Dark mode is a display option that renders a light-colored interface on a dark background instead of the default dark-on-light layout, reducing screen brightness in low-light conditions and, on OLED screens, saving battery.

What is dark mode?

Dark mode inverts the usual color relationship of an interface: light gray or white text sits on a near-black or dark gray background rather than dark text on a white page. It started as an operating system preference and is now expected as a toggle or automatic setting in most apps, websites and design tools. The goal is comfort in low ambient light and, for some users, a reduction in eye strain during extended screen use.

How dark mode works

On the web, dark mode is most often implemented through the CSS media feature prefers-color-scheme, which reads the operating system's setting and lets a stylesheet respond automatically:

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #e6e6e6; }
}

A manual toggle typically sets a data-theme attribute or a CSS class on the page and swaps a set of CSS custom properties, design tokens for color, rather than hardcoding colors twice, which keeps the two themes consistent and easy to maintain.

Approaches to dark mode

• System-driven: the interface follows the operating system's light or dark setting automatically, via prefers-color-scheme.
• User toggle: a switch lets a visitor override the system setting and choose light or dark explicitly, usually stored in local storage or a cookie.
• Forced dark: a browser or OS-level feature that inverts colors on sites without native dark mode support, often with inconsistent results.
• Dark-only design: some brands ship a single dark theme by design choice rather than as an alternative to a light one.

Dark mode vs light mode

Best practices and common pitfalls

A common mistake is pure black (#000000) with pure white text, which creates a harsh contrast that causes visual vibration for some readers; a near-black background, around #121212, with off-white text is easier on the eyes. Elevated surfaces such as cards or modals need a slightly lighter shade than the base background to preserve depth, since shadows read poorly on dark backgrounds. Every color, not just backgrounds and text, needs a dark-mode equivalent: brand colors, borders, icons and images should all be checked against the dark palette, and a photo with a white background can look out of place without a subtle frame or padding adjustment.

Accessibility and impact

Dark mode meaningfully reduces power consumption on OLED and AMOLED screens, since black pixels draw little to no power, though the effect is negligible on LCD screens which backlight the whole panel regardless of color. Contrast still needs to meet WCAG guidelines in both themes; light gray text on a dark gray background can fail accessibility minimums just as easily as light mode can. Some users report less eye strain in low light with dark mode, though the evidence on eye health is mixed rather than conclusive, and comfort is largely a matter of personal preference and ambient lighting.

Dark mode at BeBranded

We build color systems as design tokens from the start of every design project, so adding a dark mode later, or shipping it from day one, is a token swap rather than a rebuild.