Dark Mode Web Design: How to Implement It Without Ruining Your Brand

Dark mode has moved from a developer preference to a mainstream user expectation. Operating systems, browsers, and apps all offer it, and a growing proportion of users browse the web with their system set to dark mode permanently. If your website ignores this preference, it can look jarring — a blinding white page against an otherwise dark interface.

Implementing dark mode well is more nuanced than simply inverting your colours. Done carelessly, dark mode can break contrast ratios, make images look odd, and clash with your brand palette. This guide walks through how to approach dark mode thoughtfully, covering CSS techniques, image handling, and user preference controls. At Xpose, we now consider dark mode compatibility a standard part of any new website build.

Detecting and Respecting the System Preference

The CSS media query prefers-color-scheme: dark lets your site detect whether a visitor’s operating system is set to dark mode and apply alternative styles automatically. Using CSS custom properties (variables) for all your colours makes this straightforward — define your light mode palette as defaults, then override them inside the media query. For example: :root { --bg: #ffffff; --text: #1a1a1a; } @media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e8e8e8; } }. Every element that references these variables will update automatically.

This system-preference approach requires no JavaScript and works instantly without a flash of wrong-coloured content. It’s the baseline — but many sites go further by adding a manual toggle so users can override the automatic choice. A toggle stored in localStorage lets the preference persist across sessions without a server.

Colour Choices and Contrast in Dark Mode

The biggest mistake in dark mode design is using pure black (#000000) as the background. Pure black creates extreme contrast that causes eye strain, especially in low-light conditions. Google’s Material Design specification recommends #121212 as the dark mode surface colour. Similarly, don’t use pure white text on dark backgrounds — a slightly softened off-white like #e8e8e8 or #f0f0f0 is more comfortable to read.

Your brand colours may need adjusting for dark mode. Colours that look vibrant on white can look washed out or overly harsh against dark backgrounds. Saturated accent colours often need to be slightly desaturated and lightened. Test every colour combination against WCAG contrast requirements in both modes — a colour that passes in light mode may fail in dark mode and vice versa. Use a tool like WebAIM’s Contrast Checker on every combination.

Images, Icons, and Brand Elements

Images with white or light backgrounds look out of place in dark mode — you’ll see a glowing white box around product photos or logos. The solutions are: use PNG images with transparent backgrounds wherever possible, or apply CSS mix-blend-mode: multiply to images so light backgrounds blend with the dark page. For logos that are dark on white, provide alternative light-coloured versions for dark mode using the HTML <picture> element with a media attribute matching prefers-color-scheme.

SVG icons generally adapt well to dark mode if they inherit colour values from CSS rather than having colours hardcoded. Audit your icon sets for hardcoded fill="black" values and replace them with fill="currentColor" so they respond to CSS colour changes. At Xpose, we build icon systems this way by default so dark mode requires no separate icon assets.