Best Practices for Dark Mode Template Design

read
Last updated at:

Overview

In both apps and email clients, dark mode inverts or darkens the colors that the viewer sees on their screen. While dark mode helps reduce eye strain from screen use, it can impact how your email appears to your subscribers if you’re not careful. This article will run through best practices to ensure that your emails are optimized for both dark and light modes.

Use Transparent Backgrounds

Images with background colors might be difficult to see in dark mode. Use transparent backgrounds with all of your images to ensure they are displayed properly.

ezgif-4-fae5bb3a1fbd.gif 

Optimize Your Logo and Social Icons

If your brand uses dark colors for your logo or social icons, add in a thin white border around it to improve readability. In light mode, users will not see the white border, but in dark mode, they will be able to see your logo and social icons.

Screen_Shot_2020-09-03_at_4.16.09_PM.png 

When in Doubt, Use Text

To ensure your message comes through on dark mode, opt for using text rather than images of text. This will not only render better in dark mode but also improve your deliverability and accessibility.

Group_3.pngAdditionally, text-only emails tend to have higher open and click rates. In cases where a text-only email makes sense, consider using them.

Test Your Emails

With any email, you should test that it will render as expected in both dark and light mode. You can test your emails by sending a preview email to yourself and test your emails across different devices and inbox providers. You can also use a third-party platform like Litmus to test your emails.

Consider Asking for Preferences

If you have the time to design both light and dark mode emails, consider asking your customers which viewing experience they prefer. You can ask in an email to your newsletter list using a hidden field in the CTA and follow up for those that don’t respond with a signup form. Consider adding preference information to your welcome series so that customers have personalized emails in the mode they prefer from the get-go.

Additional Resources

 

 

x
Was this article helpful?
12 out of 15 found this helpful