Reduced eye strain, less blue-light exposure, longer battery life: Dark mode settings offer plenty such user benefits, but the challenges to those tasked with developing and designing emails optimized for dark mode are many.
So how, as empathetic designers, do we accommodate and optimize for dark mode?
For many email clients, dark mode drastically changes an email’s design and color scheme by inverting the colors in an email. Light backgrounds or text become dark, and dark colors become light, which makes coding an email tricky. Each email client will display your email differently in dark mode—so what looks good for one might not for another.
Some clients have no changes to the email, some have color inversion, some allow you to use CSS to customize your email for dark mode. With so many users switching to dark mode, it’s important to keep in mind the ways that you can design for dark mode so your design looks good for everyone.
Tips for Designing with Dark Mode in Mind:
- Images, logos, and icons with transparent backgrounds look best in dark mode—a white background doesn’t provide a clean look against a dark background.
- Outline your images—if an image is dark, outlining it in white will give the image a clean look and make it easier for users to view the image against a dark background.
- Use live text—it will automatically contrast with whatever dark background color is being used.
- Add CSS Styling—it allows you to specify which colors you would like your text to revert to when transforming to dark mode (though this won’t be the solve for all email clients).
And finally, most important: Test!
Checking the renderings of your emails to ensure they’re readable and viewable in dark mode is a must. By testing, you can ensure that users across the board are having the best possible experience when viewing your email.
Employing these commonsense steps will help ensure your designs and layouts reproduce faithfully across all modes. Ensuring your message gets through clearly in any format.
