dark mode for websites: when it works and when to skip it

dark mode has become standard on smartphones, operating systems, and major apps. many users now prefer it, particularly for evening use and on oled screens where dark pixels use less battery. the question for businesses: should your website support dark mode?

the answer depends on your audience, your brand, and how much development investment you're willing to make.

why dark mode on websites is harder than it sounds

adding dark mode to an app built from scratch is relatively straightforward — you define a dark theme and switch between them. for a website, especially an existing one, it's more complex:

• custom colours throughout. every colour in your design system needs a dark variant. not just background and text, but borders, shadows, icons, illustrations, input fields, states.
• images and logos. a logo designed for a white background often looks wrong on a dark background. png images with white backgrounds become glaring boxes. this usually requires alternate assets.
• brand integrity. many brands have carefully considered colour palettes that were designed for light backgrounds. a dark version that wasn't designed with the same care can undermine brand consistency.
• testing surface area doubles. every layout, component, and page needs to be tested in both modes.

css prefers-color-scheme: the automatic approach

modern browsers expose a media query called prefers-color-scheme: dark that tells a website whether the visitor's operating system is set to dark mode. you can use this to automatically switch your site to a dark theme without requiring user action.

this is the minimum viable approach: define css variables for your colours, and override them when prefers-color-scheme: dark is detected. done well, it means users who prefer dark mode get it automatically. done poorly, it means an inconsistent experience that nobody chose.

when dark mode is a good fit

tech products and developer tools. terminals, code editors, and dev tools have been dark by default for decades. a saas product for developers or a technical audience that doesn't offer dark mode will feel behind.

creative and portfolio sites. dark backgrounds make vibrant photography and design work pop. photography portfolios, design agencies, and creative studios often look genuinely better on dark backgrounds.

apps with extended use sessions. if users spend significant time in your product — reading, writing, working — reducing eye strain with a dark option is a real feature. this matters for productivity tools, content platforms, and anything people use for more than a few minutes at a time.

when to skip it or deprioritize it

retail and ecommerce. product photography is shot against controlled backgrounds designed for light interfaces. a dark ecommerce site looks unusual, and research consistently shows light backgrounds perform better for purchase conversions.

healthcare and professional services. bright, clean, light designs communicate clarity and trustworthiness in healthcare contexts. dark interfaces in health and legal contexts can feel out of place.

small teams with limited resources. implementing dark mode properly takes real design and development time. for a small business rebuilding their website on a tight budget, dark mode is almost never the best use of that budget.

the implementation options

css-only, media-query based. detects the user's os preference and applies automatically. no user control, lower complexity.

user-toggle. a sun/moon icon that lets users choose their preferred mode, with the preference saved in local storage. more user control, more development work.

system default with opt-out. follow system preference by default but provide a toggle for users who want to override.

the honest recommendation for most small businesses

unless your brand and audience strongly point toward dark mode (tech product, creative industry, developer-focused), investing the time to do it properly usually isn't the highest-priority item. a well-executed light site beats a poorly executed site that happens to have a dark mode.

if you are building a new site and dark mode aligns with your brand, designing for it from the start is far cheaper than retrofitting it later. build it into your design system from day one.

nanushi builds sites with thoughtful design systems that can accommodate dark mode when it makes sense for the client's brand and audience.