By Magnetic Clouds Design
A well-made dark theme reduces eye strain, saves battery on OLED screens and looks great. A careless one is a grey mess. These are the rules our designers follow.
- Avoid pure black. Pure black behind white text is harsh and smears on OLED displays; deep, slightly tinted neutrals work better.
- Show elevation with light. Shadows disappear on dark backgrounds, so raised surfaces become lighter instead.
- Desaturate brand colours. Highly saturated colours vibrate on dark backgrounds — shift them a few steps lighter and softer.
- Respect the user's choice. Offer a clear toggle, remember the preference and avoid flashing the wrong theme on load.
- Test contrast again. WCAG contrast rules apply in both themes, for every text colour.
This website follows the same rules — try the theme switch in the header. Our UI/UX Design team can do the same for your product.
