Dark Mode for Websites: Should You Add It, and How to Do It Properly

Dark mode has become common on phones, apps and operating systems. Some visitors now expect websites to follow their device setting. Should your business website support it? Often it's a nice-to-have rather than a must, but if you add it, do it properly.

Dark design vs dark mode

• Dark design: the website is always dark (e.g. a nightclub, a tech brand or a premium car service)
• Dark mode: the website switches between light and dark versions, based on the visitor's device setting or a toggle

When dark mode makes sense

• Blogs, documentation and long reading content
• Web apps and dashboards used for long periods
• Tech, gaming or entertainment audiences
• Sites people use at night

When it's lower priority

• Simple brochure sites where people visit briefly
• Brands with a strong light identity
• Projects with tight budgets. Dark mode roughly doubles the colour testing work

How it works technically

Browsers expose the user's preference through a CSS media query:

:root { --bg: #ffffff; --text: #1a1f36; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1420; --text: #e6e9f2; }
}
body { background: var(--bg); color: var(--text); }

Defining colours as CSS variables makes dark mode manageable: change the variables, not every rule. A toggle can override the setting and remember the visitor's choice.

Colour tips for dark themes

• Don't use pure black (#000). A very dark navy or grey is easier on the eyes
• Don't use pure white text. Slightly off-white reduces glare
• Desaturate bright brand colours. Vivid colours that look good on white can vibrate on dark backgrounds
• Use elevation by lightness. Cards slightly lighter than the background replace shadows, which don't show well in the dark
• Check contrast. Body text still needs strong contrast (WCAG suggests at least 4.5:1)

Images, logos and icons

• Logos with dark text disappear on dark backgrounds. Prepare a light version
• Transparent PNG images with dark elements need a check
• Screenshots and diagrams may need a subtle border or background
• SVG icons that use currentColor adapt automatically

Common mistakes

• Forgetting form fields, which stay white with white text
• Third-party widgets (maps, chat, embeds) that don't switch
• Hard-coded colours in inline styles
• Testing only on desktop

Should you add a toggle?

Following the device setting covers most users. A toggle is useful for reading-heavy sites. Remember the choice in local storage so it persists.

Our approach

For most business websites, we design an excellent light version first, then add dark mode when it serves the audience (blogs, apps, tech brands). If your brand is naturally dark, we design a dark theme from the start and test contrast carefully.

Thinking about a modern redesign? Talk to us.