Dark mode done properly

Many people now set their phones and computers to a dark appearance, at least in the evening. Websites can respond to that preference and offer a dark version of their design. Done well, it feels considered and comfortable. Done badly, it produces glaring white images on black pages, unreadable grey text and brand colours that suddenly look radioactive.

The trick is to treat dark mode as a second, related colour scheme, not as a filter that flips everything.

Should your site have dark mode at all?

Not every small business site needs one. A single light design that's well made is better than a rushed dark version. Dark mode is worth the effort when:

• Visitors are likely to use your site in low light, such as a cinema listings page, a late-night takeaway or a bedtime story subscription.
• Your site is something people return to often and read at length, like a blog, a recipe archive or a member area.
• Your brand already leans dark and you want both modes to feel intentional.

If you do add it, the default behaviour should follow the visitor's system setting, with an optional toggle for people who want to override it.

Don't use pure black

It's tempting to set the background to pure black and the text to pure white. The result often feels harsh: the extreme contrast can make text appear to shimmer or bleed for some readers, particularly in thin fonts.

Most well-crafted dark themes use a very dark grey or a dark tinted colour instead. A deep charcoal, a dark navy or a near-black with a hint of your brand colour all work. Text then sits at an off-white rather than pure white. The contrast remains strong, well above accessibility requirements, but it's gentler on the eyes.

Build depth with lighter surfaces, not shadows

In light designs, cards and panels often float above the page using shadows. Shadows barely show on dark backgrounds, so dark themes need a different way to express depth.

The common approach is to make raised surfaces slightly lighter than the background. The page might be the darkest shade, a card a step lighter, and a menu or dialog sitting above it lighter still. Think of it as a small ladder of three or four dark tones, each used for a specific level.

For example, a dark mode for a recipe site might use:

• A near-black background for the page.
• A slightly lighter charcoal for recipe cards.
• A lighter grey again for the ingredients panel that slides over the content.
• Subtle, low-contrast borders to separate items where tones are close.

Rethink your text colours

Body text

Off-white or light grey for body text, comfortably readable against the background. Check contrast with a tool rather than by eye; it's easy to drift too dim. WCAG sets minimum contrast ratios for text, and those apply in dark mode just as they do in light.

Secondary text

Captions, dates and labels can be dimmer than body text, but not so dim they disappear. A common mistake is reusing a mid-grey that worked on white and finding it nearly invisible on charcoal.

Font weight

Light text on dark backgrounds can look slightly bolder than the same weight in dark on light. Very thin fonts may look fine in light mode and fragile in dark. Some designers use a marginally lighter weight in dark mode to compensate; at minimum, avoid hairline weights for body text.

Adapting brand colours

Brand colours chosen for white backgrounds often misbehave on dark ones. A deep navy disappears. A bright saturated red or electric blue can vibrate uncomfortably.

• Lighten and slightly desaturate brand colours used for text, links and icons in dark mode. A rich forest green on white might become a softer, lighter sage on charcoal.
• Keep the hue recognisable. The aim is the same colour adjusted for its new surroundings, not a different colour.
• Check button contrast in both directions. A button with white text on a mid-blue may need dark text on a lighter blue in dark mode.
• Use your logo's alternative version if you have one. A dark logo on a dark background vanishes; many brands keep a light or reversed version for this reason.

Images and illustrations

Photos generally work in both modes, but a few adjustments help:

• Large bright images can feel glaring on a dark page. Some sites reduce the brightness of photos very slightly in dark mode. Be gentle; overdoing it makes images look muddy.
• Images with white backgrounds, such as product cut-outs, appear as harsh white boxes on dark pages. Use transparent backgrounds where possible, or place them in a light card deliberately, so it looks intentional.
• Diagrams and illustrations with dark lines on transparent backgrounds become invisible. Provide alternative versions or use colours that work on both.
• Screenshots of light interfaces can be jarring. There's not always a fix, but giving them a subtle border helps them sit more comfortably.

Implementing it

Technically, sites can detect the visitor's preference and switch colour values. The cleanest way is to define colours as named variables and give them different values for each scheme.

:root {
  --bg: #ffffff;
  --text: #1c1c1c;
  --accent: #2f6b4f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161a19;
    --text: #e8ece9;
    --accent: #8cc7a8;
  }
}

Everything else in the design then uses var(--bg), var(--text) and so on, so switching schemes changes the whole site consistently. If you also offer a manual toggle, remember the visitor's choice so they don't have to set it on every page.

Common mistakes to check for

• Form fields that stay white with white text typed into them.
• Hard-coded colours in one or two components that ignore the theme.
• Focus outlines designed for light backgrounds that vanish in dark mode.
• Embedded maps, videos or third-party widgets that remain bright white.
• Shadows used as the only separator between sections.
• A flash of the light theme on page load before the dark one applies.

Dark mode checklist

• The site follows the system setting by default, with an optional toggle.
• Backgrounds use dark greys or tinted darks, not pure black.
• Depth comes from progressively lighter surfaces.
• Body and secondary text meet contrast requirements.
• Brand colours are lightened and softened, still recognisable.
• Logos, product images and diagrams have dark-friendly versions.
• Forms, focus states and embeds have been checked in dark mode.
• Colours are defined as variables so both themes stay in step.

A good dark mode feels like the same site in the evening light: recognisably yours, just easier on the eyes.