Best Practices for Dark Mode Template Design

Overview

In both apps and email clients, dark mode inverts or darkens the colors that the viewer sees on their screen. While dark mode can help reduce eye strain from screen use, it will impact how your email appears to your subscribers if you are not careful.

This guide will run through best practices to make sure that your emails are optimized for both dark and light modes.

Best practices for dark mode template design

Use transparent images

Transparent images allow the background color to stay consistent with the design. A transparent image doesn't have a white background, which means your image's background will be the default background of whatever environment it lives in. This helps prevent your email's images from becoming white boxes on a black background.

If an image's empty space is filled with white, it won't matter in light mode - however, in dark mode, this will stick out like a sore thumb. For instance, take a look at this Seasons 52 message.




In light mode, the email looks good. However, when viewed in dark mode, it is clear that the image backgrounds are not transparent. See how the logo doesn't blend in with the rest of the message?

A quick way to check if an image's background is transparent or white is by looking for the light gray and white checkerboard background in your files - that background indicates the image's background is transparent.

Outline black text in white

If there is any black text in your message, it won't show up when the email is viewed in dark mode. To get around this, you should highlight the text in white so it will still show up when the background becomes black.

In this example email from Land's End, the brand's navy-colored logo doesn't show up well in dark mode. This could have been avoided by highlighting the text in a lighter color.

Use white strokes around black design elements

Dark mode emails can sometimes cause an unwanted disappearing act in your campaigns. Suddenly black text, logos, icons, and more are invisible against dark backgrounds.

While some graphic designers may cringe at the idea of adding white strokes around text and icons, it is an effective way to ensure your emails are readable and actionable. The white stroke will not be visible in light mode, but it can help things stand out when viewed in dark mode.

Experiment with plain-text emails

This doesn't really "fix" the issue, but it is a good excuse to try a different email approach. Whether you are sending marketing or transactional emails, sometimes a plain-text message does the job better than a polished, HTML-heavy email.

Since plain-text emails only include, well, plain text, you don't have to worry about design elements rendering correctly. Plain-text emails are black on white, so they easily invert.

Test your emails

Before you go crazy trying innovative tactics, test your emails in both a light and dark setting. Because different inbox providers render dark mode preferences in various ways, you will need to make sure you test your emails in different inboxes across clients, devices, and browsers. Send a preview email to yourself and 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. Consider adding preference information to your welcome series so that customers have personalized emails in the mode they prefer from the get-go.

Updated on: 07/09/2021