Best Practices for Dark Mode Template Design

Last updated at:


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.

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.


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.


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.pngText-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 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



Was this article helpful?
64 out of 120 found this helpful