Dark mode template design best practices reference

read
Last updated at:

You will learn

Learn what dark mode is, plus best practices to ensure that your emails are optimized for both dark and light modes.

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. 

Dark mode is a user-selected setting, and it is not advisable or possible to completely avoid the impacts of dark mode on your email designs. Instead, it’s best to optimize your emails for compatibility with dark mode. Klaviyo’s support team is not able to troubleshoot specific changes a dark mode device makes to your emails, and can only provide general guidance for optimizing your emails.

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.

An optimized message in both light and dark modes 

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.

A logo with a thin white border, allowing it to render smoothly on dark backgrounds 

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.

A side-by-side comparison of a message that uses text in an image, versus one that uses text directly in the email

Text-only emails tend to have higher open and click rates. Where a text-only email makes sense, consider using them.

Test your emails

With any email, 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 the Litmus Extension for Klaviyo (available on Google Chrome) 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?
76 out of 149 found this helpful