Dark Mode Design: Should Your Website Have It?

Many people switch their phones and computers to dark mode, and they increasingly expect websites to respect that choice. Should yours offer it?

Benefits

• Comfort: some users find it easier to read in low light.
• Battery: on OLED screens, darker pixels can use less power.
• Preference: it shows you respect users’ system settings.

Pitfalls

• Pure white text on pure black can cause glare; slightly softer contrasts read better.
• Logos, charts and photos designed for white backgrounds may look wrong.
• Poorly tested colours can fail accessibility contrast checks.
• Maintaining two themes takes design and testing effort.

How to do it well

Use CSS variables for colours and the prefers-color-scheme media query to follow the visitor’s system setting. Offer a toggle so people can override it, and remember their choice.

Design tips

• Use dark grey rather than pure black for backgrounds.
• Reduce the saturation of bright accent colours.
• Provide alternative logo versions with transparent backgrounds.
• Check contrast ratios in both themes.

If your audience reads long content or uses your site in the evening, dark mode is worth the effort. For a simple brochure site, a well-designed light theme may be enough.