Designing for Dark Mode: The Latest Challenge in Email Design

The demand for dark mode-compatible design is increasing as the setting is gaining popularity among consumers. Dark mode is a low-light display option with the purpose of decreasing eye strain, reducing screen brightness, and making content easier to read. But for Marketers, especially for those working with emails, it’s a new hurdle. With its inverted color scheme, dark mode is another variable for which Marketers have to account in email design. (As if email rendering weren’t already complex enough!) This setting is also unlikely to be just a passing fad, since three of the largest ESPs, Apple, Outlook, and Gmail, are now supporting dark mode to various extents.

At Zaius, we understand that you want to deliver the best experience to your customers and cater to their preferences, even if that involves implementing new design elements that are compatible with light and dark mode alike. We put ourselves in your shoes and experimented in the Zaius Engagement Designer to identify smart ways to tackle this challenge. Check out our findings and recommendations: 

Images

• We recommend using transparent images for a more seamless look and feel in your design.
• If you don’t have the option to use a transparent image, try adding more whitespace. This will communicate that the extra whitespace is present intentionally. Alternatively, you can even make the images full-width, if appropriate.

Dark Assets

• Because logos with black text or dark imagery will get lost on a dark background, you should include a white border or glow to add contrast in dark mode.

• Likewise, black and black-outlined buttons may blend into the background in some clients, so try a slightly light-tinted black for outlines or fills, or use colored buttons instead.

Background Colors

• Be careful using background colors, especially with images, since background colors may invert, while images will not.
• When using colored text over a colored background, account for enough contrast in dark mode when one or both colors may change.

• Note that in some clients, sections with light text on dark backgrounds will not change in dark mode.
• Be aware that dark mode may invert images used as background elements. If you’re using text on top of background images, consider saving the text as part of the image itself to preserve true image colors.

While there are some CSS snippets you can use to (try to) hack dark mode, we recommend the path of least resistance. You will knock those emails out faster and with less headache if you prepare your emails and graphics with dark mode in mind. And that brings us to our last point:

Always test!

In our last example, you see how our email design appears across different clients. Our tip here is to ask team members with access to various ESPs and devices to test how your emails look for them.