Quick answer
Dark mode design is a theme that uses dark backgrounds with light text, designed to reduce glare and suit low-light use. Good dark mode design uses carefully chosen colours rather than pure inversion, keeps text contrast high and follows the user's device setting.
Key takeaways
- Avoid pure black backgrounds and pure white text.
- Keep text contrast at or above WCAG minimums.
- Respect the user's system preference.
- Test images, shadows and charts in both themes.
Why offer dark mode?
- Comfort in low light.
- Battery savings on some screens.
- Personal preference and accessibility needs.
- A modern, polished feel.
How do you choose dark colours?
| Element | Tip |
|---|---|
| Background | Use a deep grey or navy, not pure black |
| Text | Use off-white for body text |
| Accent colours | Soften bright colours that vibrate on dark |
| Elevation | Lighten surfaces slightly instead of using heavy shadows |
How do you check contrast?
WCAG asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. Check both themes, not just one.
Remember that very high contrast can also tire the eyes, so aim for readable rather than extreme.
How do you build it?
- Define colours as variables, such as CSS custom properties.
- Use the prefers-color-scheme media query to follow system settings.
- Offer a manual toggle and remember the choice.
- Test every screen, form and email.
What commonly breaks?
- Logos with white backgrounds.
- Charts using colours that vanish on dark.
- Images with fixed light borders.
- Third-party widgets that ignore the theme.
A thoughtful dark mode design plan lists these early.
Quick tests before you ship
- Read a long article in a dim room.
- Check every form field and error state.
- View your site on a phone with the theme switched.
- Zoom the page to 200 percent.
If anything is hard to read, adjust the palette. Ask a few users with different eyesight to try it too. Fresh eyes spot problems you have stopped seeing, and their feedback is cheap to collect.
Bottom line
Do not simply invert your colours. Choose a dark palette on purpose, check contrast and respect the visitor's system setting.
Sources and further reading
- W3C: Web Content Accessibility Guidelines 2.2
- web.dev: prefers-color-scheme
- Material Design: Dark theme
Checked against the sources above and our own project experience. Last reviewed 7 October 2026.
