Once your carefully-designed email goes out into the world, there are all kinds of factors outside your control that affect how it looks in each customer’s inbox. Dark mode is one culprit that can throw a wrench into your branding, not to mention legibility.
While it may be a headache for marketers, dark mode is popular among customers: it can increase accessibility for people with low vision, it may save battery life, and plenty of people simply prefer the way it looks. While there’s no comprehensive data on the extent of dark mode usage, it’s safe to assume that some percentage of your audience (maybe a large portion) is opening your emails in dark mode.
At the end of the day, you don’t have much control over the issues presented by dark mode. But what you can do is follow best practices to show your emails in their best light.
The dark side of dark mode
Dark mode can introduce unexpected changes to your emails. For example, here’s a side-by-side of how one of our old emails displayed in light and dark mode:
Our logo gets pretty lost, but at least in this case the message is still legible.
However, if you layer your logo smartly and are aware of how different elements and fonts render in dark mode, it can look great, as in Helpscout’s emails here:
You always want to be aware of how dark mode can affect your design. In some instances, dark mode could make your text totally unreadable or render your CTA buttons invisible.
Dark mode support: three approaches
It can be frustrating to see your email’s appearance change when it’s delivered, and it helps to understand what’s happening on the inbox side of things. Every client displays emails differently. When it comes to supporting dark mode, clients take one of three approaches.
Approach #1: CSS customization
Some clients, like Apple Mail, support CSS that can dynamically change text and background color, and even swap out images, for better results in dark mode.
The upside: You can control your design with a fair degree of precision if you write code and develop two different email versions.
The downside: Not all teams have the resources for extensive coding, and the extra cost isn’t always worth it.
Approach #2: No support
Some clients (primarily desktop, web, and legacy mobile email clients) render an email the same whether it’s viewed in light mode or dark mode. So the email program’s interface may support dark mode, but the client doesn’t change the look of emails themselves.
The upside: What you see is what you get. The design of an email will look the same in light or dark mode.
The downside: If an email has a light background, it can look painfully bright within a dark mode interface, which is a huge turn-off for customers who enabled dark mode to avoid just that.
Approach #3: Partial or full color inversion
Some clients (such as most Outlook clients and Google’s iOS and Android apps) take a middle ground by using color inversion: making dark colors lighter and light colors darker. Partial inversions usually invert light backgrounds and dark text only. Full-color inversions, on the other hand, invert every color in your email.
The upside: As long as you follow design best practices, partial inversions generally preserve readability, and they tend to make less drastic changes to your design.
The downside: The way your emails display in these clients is especially unpredictable. And full-color inversions can take an email with an intentionally dark color scheme and make it light, doing the opposite of what customers want from dark mode.
What you can do about dark mode
With so many email clients out there, it’s likely that you’ll encounter all three approaches with any given campaign, so it’s wise to be flexible and anticipate every scenario.
If you code your own emails, you’ll have more control over dark mode rendering. But even if you don’t, you can design emails that look acceptable on almost any email client and avoid dark mode pitfalls that can undermine engagement.
Test, test, test
If you’re serious about mitigating the impact of dark mode, it may be time to invest in a tool that tests your messages across different email clients, like Email on Acid or Litmus. You can see exactly how your design will look in different email clients, revise, and re-test your design until it’s true to your brand on all (or at least most) of your customers’ email clients. As an added bonus, these tools often provide intel to improve deliverability with actionable recommendations on the makeup of the email.
If you don’t use a third-party testing tool, Customer.io’s testing feature can help. Send your email to as many different clients and devices as you can; it’s more labor-intensive, but it can reveal major problems before they affect your customers.
Follow design best practices
Add best practices for dark mode to your design guidelines:
- Do put a light background behind dark text
- Do use transparent images. If you can’t, crop images in a way that looks intentional. Adding a bit of space around the image, rather than cropping at its edge, can help
- Do add a white outline or shadow around anything that will disappear against a dark background, like your logo
- Do provide enough contrast between text and background colors to ensure text is readable even if the colors are inverted
- Don’t use a single image for your entire email (this is also important for deliverability in general: ISP spam filters may flag image-only emails as spam)
Prioritize effectiveness over perfection
Though it’s a disservice to email designers everywhere, most email clients simply don’t support dark mode very well, at least not yet. Unless your brand requires creative perfection, and you’re willing to greatly simplify your designs while spending significantly more resources to create them, your results will not be flawless.
In time, dark mode support will likely catch up with marketers’ and customers’ needs. For now, the key is creating a design that’s legible in every email client so that dark mode doesn’t relegate your email’s message and CTAs to the shadows.