Does my business website need dark mode?

Usually not as a requirement. Nielsen Norman Group found that users rarely abandon a design for lacking dark mode and calls it a nice-to-have. It is most worth adding for sites people read for long stretches, use often or visit at night, such as blogs, documentation, dashboards and web apps.

Should dark mode be the default on my website?

For a general audience, no. Research reviewed by Nielsen Norman Group found that people with normal vision usually read better in light mode. The better approach is to follow the visitor's device setting by default and offer a toggle so they can choose.

What is the CSS light-dark() function?

light-dark() lets a designer set a light value and a dark value for a color in one line, and the browser picks the right one based on the active color scheme. It became Baseline Newly available in May 2024, and it only works when the page declares a color-scheme.

Is dark mode better for accessibility?

It helps some people, such as some users with cloudy eye lenses, and hurts others if the contrast is poor. Both themes must meet the same WCAG contrast minimums of 4.5:1 for normal text and 3:1 for large text.

Does dark mode save battery?

Only on OLED screens. Nielsen Norman Group cites a Purdue study that found an average 67% power reduction at 100% screen brightness but only 14% at 30% brightness, so savings depend heavily on the device and settings.

Dark mode for business websites: should you add it, and how to do it right

Dark mode is a second color theme for your website, with light text on dark backgrounds, that switches on when a visitor's phone or computer is set to dark. It is not new, but it has become much easier to build. Browsers now support CSS tools like light-dark() and contrast-color() across all major engines, and platforms like WordPress, Webflow and Shopify have better ways to manage color themes. That makes dark mode a realistic option for small business sites, not just big apps. Whether you should add it depends on your audience: research says it is a welcome extra for long reading sessions, not something most visitors will leave over.

Here is what the research says, how to build it on your platform, and when to skip it.

What the trend is

Dark mode means your site has two color themes, light and dark, and picks one automatically. Most phones and computers have a system-wide setting, and websites can read it. The best versions also let visitors override that choice with a toggle.

What has changed in the last two years is how little code this takes. Instead of writing every color twice, designers can now define both versions of a color in one place and let the browser handle the switch.

Why it is happening now

The CSS finally makes it simple

light-dark() lets you set a light value and a dark value for one color in a single line. web.dev reported it became Baseline Newly available on May 13, 2024, with support in Chrome and Edge 123, Firefox 120 and Safari 17.5. The catch: "for light-dark() to work correctly, you need to specify a color-scheme."
color-scheme tells the browser which themes your page supports, so built-in parts of the page follow along.
contrast-color() takes a background color and returns black or white, whichever gives the higher contrast. web.dev's April 2026 roundup says that with Chrome 147 it reached all major engines, making it Baseline Newly available. Safari added it in Safari 26.0.
Relative colors and color-mix() let you build a whole palette from one brand color. web.dev's guide to color themes with Baseline CSS features shows how to derive surfaces, borders and accents from a single base color.

Platforms think in themes now

Shopify themes use color schemes, and newer themes use color palettes. Webflow added variable modes in January 2025. WordPress block themes can use light-dark() in their color settings. When your colors already live in one central place, adding a dark version is a much smaller job.

Users think about it at the system level

Nielsen Norman Group's study of dark mode users found that "users think about dark mode at the operating-system level, not at the individual application level." In their survey of 115 mobile users, about a third used dark mode, a third used light mode and a third used a mix. People who set their phone to dark expect sites to follow.

What the research says

This is the part most trend articles skip. Nielsen Norman Group's review of the research on dark mode versus light mode found that "in users with normal vision, light mode leads to better performance most of the time," especially with small text. But some people with cloudy eye lenses, such as from cataracts, read faster in dark mode, and many people simply prefer it.

Their recommendations:

Do not make dark mode the default for a general audience.
Do let users switch to dark mode.
Sites built for long reading, like news and magazines, should offer it.
Use the operating system's dark mode setting when it is available.

Their later study adds a reality check: they would be "very surprised" to see users abandon a design because it lacks dark mode. Treat it as a nice-to-have that should never come before basic usability.

Common dark mode problems

Nielsen Norman Group's study lists issues we see all the time, described here in our own words:

Problem	What happens	Fix
Logos and images with white backgrounds	They show up as bright white boxes	Use transparent SVG, PNG or WebP files, or a dark version of the logo
Pure black backgrounds	Dark cards and borders disappear, and bold light text can seem to glow	Use a dark gray base and lighter grays for raised surfaces
Thin fonts	Light, thin text fades into the background	Use regular or medium weights for body text
Saturated brand colors	Bright colors can buzz or lose contrast on dark backgrounds	Make softer versions of brand colors for the dark theme
Thin dividers and outlines	Lines between sections vanish	Increase their contrast in the dark theme
Links to light pages	Visitors bounce between dark and light	Theme your embedded forms, booking tools and help pages too

Contrast rules still apply

Both themes have to meet WCAG. Success Criterion 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. A dark theme does not get a pass, and it is easy to fail with gray text on a dark gray background. Check both themes with a color contrast tool. Our guide to website accessibility and WCAG covers the rest.

How to add dark mode on your platform

WordPress

The WordPress Developer Blog walks through building a light and dark toggle in a block theme. The theme's color palette in theme.json uses light-dark() values, and the root of the page sets color-scheme: light dark, so the site follows the device setting by default. A toggle built with the Interactivity API lets visitors override it, saving the choice as user meta for logged-in users and in a cookie for everyone else. The author chose a cookie over browser storage because the server can read it. Classic themes and page builders vary, so check your theme or builder's settings first; our roundup of WordPress theme builders is a good starting point.

Webflow

Webflow's help center explains that variable modes let one variable hold several values. Modes apply automatically by breakpoint or manually to a class. Webflow's own examples are brand themes rather than dark mode, so a dark theme is usually a manual mode on a wrapper class plus a small script for the toggle and the device setting. The help center warns that some child elements may not inherit mode values when styles come from the body. See Webflow for design-led sites for more on the platform.

Shopify

Shopify's color schemes are groups of colors, such as background, text and button colors, that you apply to sections. The help center says the theme editor allows up to 21 schemes, and newer themes like Horizon 4.0.0 and later use color palettes instead. These make dark sections easy, but a full theme that switches with the device setting usually needs code. Shopify's developer docs warn that you "shouldn't apply hardcoded colors to elements that require an accessible contrast ratio", which matters even more with two themes.

Custom sites

On a custom build, set color-scheme: light dark on the root, define your colors with light-dark(), and add a toggle that sets a data attribute on the page, as web.dev's color theme guide shows. Store the visitor's choice so it sticks between pages, and load it early to avoid a flash of the wrong theme.

When not to add dark mode

When your brand lives on a light background. Some brands, like a bright bakery or a pastel kids' shop, lose their personality in a dark theme. A well-designed light site is better than a muddy dark one.
When you cannot maintain two themes. Every new page, graphic and embed has to work in both. If no one will check, skip it.
When product photos depend on white. Ecommerce photos shot on white backgrounds can look harsh on dark pages.
When you are only doing it to look trendy. Making dark mode the only theme because it looks sleek in a mockup goes against the research for general audiences.

Dark mode does have a quieter benefit: the W3C's draft Web Sustainability Guidelines recommend supporting user preferences like prefers-color-scheme. And on OLED phones, Nielsen Norman Group cites a Purdue study showing real battery savings at high brightness, though much smaller savings at normal brightness.

The bottom line

Dark mode is easier to build than ever, and visitors who use it will appreciate it. Follow the device setting, offer a toggle, keep contrast high in both themes, and fix your logos and images. If your site is mostly a few pages people visit briefly, put that effort into speed and clarity first. If you are planning colors from scratch, start with our guide to getting a new brand onto your website, or see how designers plan themes in Figma.

Thinking about a dark theme or a color refresh? Talk to us and we will help you decide if it is worth it.