Dark mode

Dark mode is a preference, not a style. Many people switch it on at the operating-system level, for reading at night, to reduce glare or simply because they like it, and websites can detect that choice and follow it. A brand site that is always dark is a different thing: a design decision rather than a respected preference.

Claims that dark mode is better for the eyes or always saves battery are often overstated. Power savings apply mainly to OLED screens, and many people find long passages of light text on a dark background harder to read. It is best treated as a comfort option.

How it works

Browsers pass the visitor's setting to websites through a CSS feature called prefers-color-scheme. A site that supports dark mode defines a second set of colours, usually as design tokens, and swaps them in when the setting is on. Many sites also add a toggle so visitors can override the system choice.

Designing dark mode is more than inverting colours. Pure white text on pure black can feel harsh, so dark themes often use dark greys and off-white text. Shadows barely show on dark backgrounds, so depth comes from lighter surfaces instead. Brand colours often need adjusting, and logos and images may need versions that sit well on dark.

Testing dark mode is straightforward. Switch your phone or computer to dark mode in its display settings and reload the site; a site that supports it changes automatically, and browser developer tools can also simulate the setting. Look at every type of page, not only the home page: forms, tables, embedded maps and images with transparent backgrounds. Transparent logos and icons drawn in black are the things that most often vanish.

Example

A gym's class-booking app adds dark mode because members check it late in the evening. The first attempt simply flips the colours, leaving the dark logo invisible, chart labels in black on near-black and a brand blue that fails contrast on the new background. The finished version uses a separate dark palette, a light version of the logo, chart colours chosen for dark backgrounds and a toggle in the settings menu.

Emails sent by the app get their own check, because many email apps apply their own dark mode and may alter colours unpredictably. The gym uses a logo with a light outline that stays visible on both light and dark backgrounds, and avoids putting important text inside images. Class photos are left unchanged, since inverting or heavily dimming photographs makes them look wrong.

Why it matters for your business

Supporting dark mode can make an app or content-heavy site more comfortable for people who prefer it, and ignoring the setting can look careless when every other app on the phone follows it. For a typical brochure site, though, it is optional. It roughly doubles the colour decisions to design and test, and every pairing must still meet colour contrast requirements, so weigh it against other improvements. If your analytics or customer feedback show people using the site for long sessions in the evening, it moves up the list; otherwise it can wait.

Common mistakes

• Inverting colours automatically without checking images, logos and charts.
• Using pure black backgrounds with pure white text, which many readers find harsh.
• Forgetting to check contrast for the dark palette separately.
• Offering a toggle that does not remember the visitor's choice on the next visit.

Questions people ask

Is dark mode better for your eyes?

Not clearly. Some people find it more comfortable in dim rooms or at night, while others read light text on dark backgrounds less easily, especially in long passages or if they have astigmatism. The best approach is to let people choose, which is why following the system setting matters more than defaulting everyone to dark.

Does dark mode save battery?

On devices with OLED screens, dark pixels use less power, so dark mode can reduce battery use, especially at high brightness. On LCD screens, which light the whole panel from behind, the saving is negligible. The effect also depends on how much of the screen is actually dark.

Should my business website have dark mode?

It is optional for most small business sites. It makes more sense for apps, dashboards and content people read for long periods, especially at night. If you add it, follow the visitor's system setting, design a proper dark palette, check every colour pairing for contrast and test images and logos on dark backgrounds.