Dark Mode FAQ and Best Practices
- Ian Graham
- David Haskell (Unlicensed)
Summary / TL:DR: Worried that you might be sending less-than-perfect-looking emails because your recipients have Dark Mode activated on their phone? Use these design tips and references to make your templates Dark Mode-proof.
What is Dark Mode?
“Dark Mode” is a vague term meaning any color theme or color setting in an app or operating system that uses a dark background and light text, rather than dark text on a white background. Its benefits are said to include reduced eye strain/fatigue, reduced energy use, and reduced light pollution. Some settings are changed within a given app; others are chosen in the device settings.
As more and more email clients, browsers, and devices offer Dark Mode and similar features, it’s more and more likely that at least some of your users are using that feature. If your templates aren’t designed to be “mode-agnostic” – that is, fully functional in either dark or light mode – you could be providing a less-than-optimal email experience for your customer.
Can Dark Mode cause Deliverability Issues?
TL;DR - Yes! Kind of…
Dark Mode on its own will have no bearing on email deliverability.
However, designing a less-than-optimal email experience for your customers can lead to spam complaints and other forms of disengagement, which will cause deliverability issues. As SendGrid describes it, “the most important factor to your sender reputation (and thus your deliverability) is recipient engagement. And if Dark Mode optimization (or lack thereof) is affecting the way recipients engage with your emails, then you better believe it’ll impact your delivery rates.”
How do I design for Dark Mode?
Making your templates mode-agnostic doesn’t require re-inventing the wheel. It may require a new set of logos and other graphics, but a full redesign/rebuild isn’t necessary.
Campaign Monitor’s “The Developer’s Guide to Dark Mode in Email” includes all sorts of tips and tricks for designing for Dark Mode. For example: using PNGs with transparent backgrounds rather than white backgrounds ensures your images render correctly no matter the background. A ~1px white/light stroke around any black/dark text will make sure its visible on light and dark backgrounds.
You can use Everest’s template testing tool to see how your templates work in Dark Mode across platforms/devices/email clients, and adjust accordingly.
Supporting Documentation:
Overview:
Notes and ideas specific to template development:
Wrap up
Dark Mode presents a new challenge for designers and developers, but a few small changes can Dark-Mode-proof your email. Designing with Dark Mode in mind and testing your templates in Everest will ensure your emails look great no matter what.
Still need help?
If you have further questions, please submit a ticket to the Deliverability team.