Dark Mode Web Design: Tips for Readable, Branded Sites

Many people set their phones and laptops to a dark theme, and they often expect websites to follow. Dark mode web design is more than flipping black and white. Done carelessly, it harms readability and brand colour.

Should your site have dark mode?

It is useful for content-heavy sites, tools, dashboards and sites used at night. A simple brochure site may not need it. Decide based on how your visitors use the site, not on trend alone.

Respect the user's preference

Browsers can tell your site whether the visitor prefers a dark theme through the CSS prefers-color-scheme setting. Start by following that. Then consider adding a manual toggle and remembering the choice, so users stay in control.

Design principles

1. Avoid pure black and pure white. Very dark grey backgrounds with off-white text are easier on the eyes than harsh extremes.
2. Check contrast. Text must stay readable against dark backgrounds. Aim to meet WCAG contrast guidelines, covered in accessible web design basics.
3. Adjust brand colours. A bright colour that works on white may look too intense on dark. Create a slightly softened version.
4. Rethink shadows. Shadows barely show on dark backgrounds, so use subtle lighter surfaces to show depth.
5. Use layers. Slightly lighter greys for cards and menus help users see hierarchy.

Images and logos

• Provide a logo version that works on dark backgrounds, such as a light or white variant.
• Check that transparent PNG or SVG images do not disappear.
• Photos with white backgrounds can look like glaring boxes, so consider soft borders or different crops.

Implementation tips

• Use CSS variables for colours so themes switch cleanly.
• Test forms, buttons, links and error states in both modes.
• Avoid text over busy images without an overlay.
• Check charts and icons, which often keep light-mode colours.

Hypothetical example

A software tutorial blog adds dark mode. The team picks a deep charcoal background, off-white body text, a softened version of its brand blue for links and a light logo variant. Testing shows code blocks needed a slightly lighter panel to stand out.

Testing checklist

• View every key template in both themes.
• Test on a real phone in a dim room.
• Run a contrast checker on text and buttons.
• Review your palette with the brand colour palette guide.