Dark Mode made its way into 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 analyse the effect Dark Mode has on your emails and how to cope with it.
What is Dark Mode?
Dark Mode is an accessibility setting on devices or applications that turns the standard bright design into a dark, often more legible, colour palette. Basically, Dark Mode switches to black and white, reduces blue light and lowers the contrast of an interface.
Dark Mode has been around for several years, but email providers are late to the party. Outlook’s Dark Mode, for example, was introduced in 2019.
Pros & Cons of Dark Mode
Getting all your current emails into Dark Mode takes a long time. To determine whether it makes sense to optimise your emails for Dark Mode, we’ll list the pros and cons 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.
Main advantages of Dark Mode (for users)
- Dark Mode saves energy on several devices with OLED displays (Apple’s iPhone XS, XS Max and X, plus several Samsung Galaxy and Google Pixel phones and several laptops);
- For some people, the contrast in Dark Mode is more pleasant than the standard black-on-white, especially for people with visual impairments and those sensitive to light (photophobia).
Main disadvantages of Dark Mode
- Dark Mode is believed to hurt the performance of the user (especially in work situations, an important indicator).
- The display in Dark Mode makes some elements of an email hard to distinguish from the background.
What does Dark Mode do exactly?
As mentioned earlier, Dark Mode affects the interface colours. By reducing blue tones in buttons, background colours and similar HEX values, Dark Mode colour inversion results in a dull button or colour in your email.
Support of Dark Mode emails worldwide
The way an email is displayed in an inbox depends on many factors, one of which is the displaying party. The exact effect of dark mode depends on whether it’s a web-based or app-based client, and whether it’s Gmail or the iCloud inbox. Dark Mode rendering differs per inbox.
Parties that support Dark Mode
Mobile
- iPhone & iPad Mail
- Gmail App (both Android & iOS)
- Outlook App (both Android & iOS)
Desktop
- Apple Mail
- Outlook 2019 (Mac OS & Windows)
Web
- Outlook.com
- Hey.com
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 the text is white, while in Light Mode, it is ‘normal’ the other way around.
However, some parties have a dark User Interface (UI) but do not have a black-and-white inversion for the emails themselves, as in the example of 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 the email’s contrast changes.
Dealing with Dark Mode as an Email Sender
As an email sender, Dark Mode can be quite challenging, with three possible outcomes:
- You either leave it for what it is;
- You try (& succeed) to crack the dark mode code with CSS;
- You adapt your content to Dark Mode users.
There is, however, no straightforward 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 optimise your emails for Dark Mode without affecting your standard emails.
#1 Align your content
By giving your email content a little more space on the sides, you create a more readable email in all cases. On smaller screens, it matters that text isn’t glued to the side of the screen, but in some dark-mode 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 close to the dark background. With a little extra breathing space, you can avoid that problem.
#2 Use as many .png format images as possible
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 see a completely dark email with white areas here and there. With .png images (those without backgrounds), 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).
#3 Subtle lines around dark images
Another tip to ensure your email remains legible for your recipient is to add thin lines to dark images (often text). Although this is not your designer’s favourite 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.
#4 Advanced: Switching between light and dark mode in the email
The fourth way to get your emails Dark Mode-proof is a bit more complicated. You can add a toggle in the email itself (an on/off button) for different modes. This way, you can create your own Dark Mode email.
The main advantage is that you have complete control over how an email is displayed in Dark Mode, since recipients can 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 in-mail content modification, e.g., for visually impaired people (called Accessibility Switcher™). Still, not much has been experimented with 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 be subject to testing.
Testing your dark emails
When you start optimising your emails for Dark Mode, make sure your changes have the desired effect in 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 analyses them for all known email clients. This way, you have an overview of all the variants of your email. The disadvantage is that not all test tools have enough functionality to test for Dark Mode.
Summarised
Although virtually no recipient has 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.
