Check your phone settings. There's a fair chance it's in dark mode, at least at night. A growing share of people use dark mode all the time, and when they visit a website that blasts them with a pure white page at 11 pm, it's a little like someone switching on the lights in a dark room.
Supporting dark mode used to be a nice extra. For many audiences, especially tech-savvy ones, it's now expected.
Follow the system setting first
The simplest and most respectful approach is to follow the visitor's operating system preference using the prefers-color-scheme media query. If their phone is in dark mode, your site appears dark. No toggle needed.
If you add a manual toggle as well, remember the choice (in local storage is fine) and make sure the page doesn't flash white before the saved theme loads.
Don't use pure black and pure white
Pure black backgrounds with pure white text create very harsh contrast, and on some screens, especially with lots of text, it causes a kind of shimmering effect that tires the eyes. We use a very dark grey or deep navy for the background, and an off-white for text.
Rethink your colours, don't just invert them
Brand colours that look great on white often look too intense or too dull on a dark background. You'll usually need slightly adjusted versions:
- Bright, saturated colours often need to be toned down a little.
- Dark brand colours may need lightening to stay visible.
- Check contrast ratios again. Passing on light doesn't mean passing on dark.
Using CSS custom properties for every colour makes this manageable. Define the palette once for light, redefine it for dark, and the whole site switches.
Use elevation with lightness, not shadows
In light themes, shadows show that a card or menu sits above the page. In dark themes, shadows barely show up. Instead, raised surfaces are usually slightly lighter than the background. A dropdown menu might be a step lighter than the page behind it.
Watch out for images and logos
- Logos with dark text become invisible on dark backgrounds. Provide a light version of your logo, or an SVG whose colours follow the theme.
- Screenshots and diagrams with white backgrounds can glare. Consider slightly reducing their brightness in dark mode, or adding a subtle border.
- Photos generally look fine, but very bright images might benefit from a gentle dimming filter.
Don't forget the details
- Form fields: inputs, dropdowns, checkboxes and date pickers. The
color-schemeCSS property tells the browser to style its built-in controls (like scrollbars and form elements) for dark mode. - Embedded content: maps, videos and third-party widgets often don't support dark mode and stick out.
- Emails: if your site sends HTML emails, test them in dark mode email clients too. Many email apps force their own dark styling.
- Code blocks, tables and charts: each needs its own dark palette.
Test in real conditions
Look at the dark theme on an actual phone, at night, with the brightness turned down. That's how many people will see it. Things that look fine on a bright monitor during the day can be unreadable in those conditions.
A good dark theme should feel like the same brand, just after sunset. When it's done well, nobody notices. When it's done badly, everyone does.
