Dark Mode definitely made it to the world of email experience. After a few years of experimenting, more and more software companies are darkening their display and email is happily hopping on that bandwagon. In this article, we analyze the effect Dark Mode has on your emails and how to cope with it.
Dark Mode is an accessibility setting on devices or in applications that turns the standard bright design into a dark, often more legible, color palette. Basically, Dark Mode switches black and white, reduces blue light and lowers the contrast of an interface.
Dark Mode has been around for a number of years, but email providers are quite late to the party. Outlook's Dark Mode, for example, was introduced in 2019.
To be frank: getting all your current emails Dark Mode proof takes a lot of time. To determine whether it makes sense for your emails to be optimized for Dark Mode, we'll list the pros and cons of using dark mode below. Since there's no real way to know how many of your recipients use Dark Mode (yet), use this list to decide if your audience is likely to darken their interfaces.
As mentioned earlier, Dark Mode has effect on the colors of the interface. By reducing blue tones in buttons, background colors and similar HEX values, Dark Mode color inversion results in a dull button or color in your email. In the example below we see the effect of Dark Mode on a white (#ffffff) header bar, a black (#000000) subtitle and a cyan (#41bac3) colored title block. The dark colors are brightened, and vice versa.
The way an email is displayed in an inbox depends on many factors, one of them is the displaying party. The exact effect of the dark mode depends on both web-based and app-based clients, or an app-based clients, Gmail or iCloud inbox, Dark Mode rendering differs per inbox.
Virtually all receiving parties automatically switch between white and black, depending on Dark or Light Mode. In Dark Mode the background is as dark as possible and contrasts with white letters, while in Light Mode it is 'normal' the other way around.
However, some parties do have a dark User Interface (UI), but do not have a black and white inversion for the emails themselves, like the example of the Gmail webmail on the right, AOL and Yahoo!-mail. Normally, for most parties, enabling Dark Mode for the application or the whole device just means that the contrast of the email will be changed as well.
The table below shows how supporting email clients treat Dark Mode (Litmus, 2020)
As an email sender, Dark Mode can be quite challenging, with three possible outcomes:
There is, however, no straight-forward solution to CSS 'hacking' Dark Mode. Only Apple Mail and versions of Outlook support this. However, what you can take into account as an email sender, are some tips that will help you optimize your emails for Dark Mode, without affecting your standard emails.
By giving the content in your emails a little more space on the side, you create a more readable email in all cases. For smaller screens it makes a difference that text is not glued to the side of the screen, but in some Dark Moded inboxes the text is more readable. This is because in normal mode black text has a lot of white space on the side, but a large part of this is removed in dark mode. As a result, the black text is really close to the dark background. With a little extra breathing space you can avoid that problem.
By replacing as many images as possible in your email with a .png file, you also increase the readability of your email. It is crazy, when you open an email and you see a completely dark email with white areas here and there. With .png images (the ones without background) you don't have that problem. Moreover, png is very suitable for small images, such as a logo, text image or a thumbnail of a white paper (see example).
Another tip to make sure your email remains legible for your recipient is to add thin lines to dark images (often text). Although this is not your designer's favorite tip, thin lines work well for your recipient. It will make it easier for the recipient to distinguish between the dark image and the dark background.
The fourth way to get your emails Dark Mode-proof is a bit more complicated. You can build a toggle in the email itself (on/off button) for different modes. This way you can create your own Dark Mode email.
The main advantage of this is that you have complete control over how an email is displayed in Dark Mode, because the recipient has the possibility to switch to your Dark Mode design. Contrary to the earlier mentioned design tips, this gives much more design freedom.
The disadvantage of this way of working, is that it is not yet completely known how to do it. There is a similar solution for the in-mail modification of content for e.g. visually impaired people (called Accessibility Switcher™), but not much has been experimented with it yet for Dark Mode, let alone for transactional emails. Therefore, this way of working requires more knowledge and skill.
In any case, working with these tips will always subject to testing.
When you start optimizing your emails for Dark Mode, you want to make sure that your changes have the desired effect on Dark Mode and do not affect the normal version. That's why it is important to keep testing. You can do this in two ways; either by creating a number of email addresses for yourself on which you test. Based on this article you can determine which email clients are relevant for you.
Another way to test your emails for Dark Mode compatibility is to send them to an email test tool, like ProofJump, which analyzes them for all known email clients. This way you have an overview of all variants that can be made of your email. The disadvantage is that not all test tools have enough functionality to test for Dark Mode.
Although virtually no recipient has yet complained about an email not being Dark Mode proof, it is important to know how the trend is developing and how the adoption is progressing. Dark Mode offers you as a sender the possibility to conquer the inbox in a new way: Your emails fit perfectly in your customer's digital experience. Though it takes (a lot of) time, getting started with Dark Mode for your emails is definitely an opportunity.