badsender logo

Guide: Dark Mode and email

Table of contents

Introduction

With the release of various dark modes for apps and email service providers since 2018, Dark Mode has been, without a doubt, one of the most "trending" topics in 2020 in the email marketing world. And it's still in fashion right now. It has been the subject of more blog posts, conferences, live events and webinars than you can imagine. A simple query on the association of the words "dark mode email" on Google still returns 3,170,000,000 results... And this article is not likely to improve things.

evolution results search dark mode email
Evolution of the results of the query "dark mode email" on Google

It is quite normal that this topic is important: every good email marketer wants his email campaigns to be displayed correctly in the inbox. This is probably one of the greatest expectations of them and of you! The development of emails is already a complex subject in itself. Especially when you see the number of pages on the White Paper on HTML Integration for Email we wrote. The concern is therefore growing in front of the increasing use of Dark Mode. So I will try to present you a summary of history, explanations, advantages, disadvantages, solutions, and conclusions to understand, know and manage at best the rendering of your emails in "Dark Mode". I warn you, this is going to be tough, hence the summary at the top of the article to find your way around. Let's get started.

What is the Dark Mode ?

Dark Mode does not apply exclusively to email. The Dark Mode, also called Dark Mode, Black Mode, or Night ModeLight Mode is a setting that users can enable to have the text of an operating system or application displayed on a dark background instead of its normal light background. This means that instead of the default dark text displayed on a light screen, called in contrast Light Mode, light colored text is presented on a dark screen.

Dark mode is an accessibility setting that shifts the interface's color palette to display content in high contrast using dark background colors and a light foreground. Ultimately, it minimizes blue light and improves readability to reduce eye strain.

Emailonacid

It is therefore a display setting. You can for example go to the display settings of your smartphone to activate the dark mode.

activation dark machine mode

Some websites or applications, and now some email clients have a "dark mode" feature.

Small question that can be raised about the nomenclature: Is Dark Mode and Dark Theme the same thing? Dark Mode is generally applied to a machine (smartphone, pc...) when the Dark Theme is applied to a single application (like the dark theme specific to Gmail for example). To be clearer : Just because you enable Dark Mode on your Android phone does not mean that the Facebook or Twitter application on your phone will display with a dark background. You will need, on the Facebook app, to enable Dark Mode to get the desired rendering. On the other hand, Instagram will automatically switch to Dark Mode when you switch your phone to dark mode. And for Gmail, you will have to go to the settings...

Don't confuse dark mode with color inversion. The aim of the Dark Mode is not to systematically and stupidly invert the colors, but to propose a background, a dark background, with clear textual content.

The Light Mode is still, for the moment, the default configuration for most phones and applications.

Finally, the Dark Mode is not new...

Let's remember: the Dark Mode has existed for a long time, not necessarily under this name: the Minitel for example presented the texts in cyan or yellow on a black background, which seemed to be optimal in terms of readability. The same goes for Teletext or Ceefax. Video games and consoles too! Atari to quote only one. Even development software such as Sublime Text, for example, offers an interface that is automatically configured with a dark background and the code in light color to better visualize the code and the syntax highlighting.

Minitel and Dark Mode

Computer monitors also originally used what we now call dark mode, due to the capabilities of the cathode ray tubes used at the time. The opposite color scheme, a dark-on-light color scheme, was eventually introduced originally in WYSIWYG word processing software to simulate ink on paper, and thus became the norm. Indeed, in order to encourage people who were not programmers to use computers, the interfaces were gradually adapted to look like paper. That is, black text on white paper. Now you know everything!

The advantages of Dark mode.

  • It's better for low-light settings: you can use it in bed without disturbing your spouse, or in the movies without disturbing others, and that's cooooooool.
  • Reduces the light emitted by the screens of the devices while maintaining the minimum color contrast ratios required for readability.
  • Designed for make it easier to read content on a screen in a dark environmentfor example in the night, the darkness (subject to debate).
  • May appear more visually appealing and pleasing to the eye.
  • Uses less blue light The visual health is then better preserved, and thus contributes to improve the quality of sleep and to tire the eyes less.
  • Reduces energy consumption because displaying white in full brightness uses more energy than black for example. This would have a positive impact on battery life (subject to debate).
  • Can potentially reduce eye fatigue and dryness in low light conditions.
  • Enables better accessibility: Dark Mode's high color contrast and reduced brightness are generally considered more readable for people with visual impairments such as light sensitivity...
  • Less brightness means less bright screen. Less bright, less battery used. So less battery to produce and especially to recharge. Overall we consume less energy.

Is everyone in agreement?

Many of these benefits are still "debated" by industry experts and are subject to many conflicting views and evidence. However, when you see all of these benefits, you can understand why more and more users are (for lack of precise statistics, we can at least rely on the craze that the subject meets) configure the Dark Mode on their consultation screens. And it is precisely this popularity that is driving the major email clients to create dark mode settings for their users.

Dark Mode issues in email.

Not all webmails, applications, services, email software provide a dark mode interface. There are actually quite a few of them since 2018 who have made this evolutionbut probably represent a large percentage of your consultations:

  • Gmail (via a web browser, an Android mobile application and an iOS mobile application)
  • Outlook (via Outlook.com web browser, Mac desktop application, Windows desktop application, Android mobile application and iOS mobile application)
  • Apple Mail Platforms (via the Apple Mail desktop application, the iPhone Mail application and the iPad Mail application)
    Yahoo (via a web browser, an Android mobile application and an iOS mobile application)

However, the real challenge lies in how these email clients handle the dark mode and render emails. We can then talk about different levels of support for the Dark mode, and discern three main levels :

  1. No color change.
  2. A partial color inversion, which changes some colors while leaving others unchanged.
  3. Complete color inversion that swaps light and dark backgrounds and text. This is the worst rendering. Your emails become unreadable.
Email clientHTML processing in dark mode
Apple Mail (MacOS)No change
iPhone/iPad (iOS 13)No change
Hey.comNo change
Outlook.comPartial inversion
Outlook 2019 (MacOS)Partial inversion
Outlook 2019 (WinOS)Reverse completely
Outlook application (iOS)Partial inversion
Outlook application (Android)Partial inversion
Gmail application (iOS)Reverse completely
Gmail application (Android)Partial inversion

Summary table of Dark Mode treatment on emails, according to the opening environments

Very quickly, you will have understood that the design of the email can be modified in some email clients. So there can just be changes from light to dark background colors, and changes from dark to light text colors. Or there may be an inversion of colors, even if the background colors are already dark and the text colors are already light. If an email is not visually pleasing in Dark Mode, the recipient will leave the email, or worse, in extreme cases, may place your email in Junk and ruin your deliverability. The problem is that software, email applications and operating systems do not have a uniform way of presenting the dark mode.

The proof by example.

We will now see four screenshots, one by one, of a single email, opened on different email services. In any case, this example is based on an iPhone render with the dark mode activated on the machine itself.

Test rendering dark email mode on emailonacid
  1. 1st screenshot: Here is the email sent to an Outlook/Hotmail address but opened with Apple Mail: we see that there is no inversion or change of colors: the email displays correctly, in its responsive version.
  2. 2nd screenshot : Here is a second screenshot : the email is this time sent to a Gmail address, but still opened with Apple Mail : the result is the same as the previous screenshot : the colors are not changed, no problematic change.
  3. 3rd screenshot : Here is now a third screenshot : This time, the email is opened from the Outlook application, still on iPhone. Here, the rendering is already not the same. The background colors change: the light background color of the header becomes a kind of dark gray: the logo is then not really visible nor readable. Moreover, the colors of the texts below become light on a dark background, but the background color of the cta does not seem to change, nor the elements of the footer.
  4. 4th screenshot : And finally the most problematic rendering when the email is opened directly on the Gmail application : the colors are also modified, as on the previous capture (you can see that the background color of the cta changes, while the original hexadecimal code is strictly the same) and above all, we can see that elements that are already light on a dark background at the beginning (i.e. the pictos and the logo in the footer) are now with a light background, and are therefore simply unreadable ... There is indeed "color inversion", without even trying to know if the original design is relevant or not (already dark, or not).

Need help?

Reading a guide can not make everything perfect. Maybe the best thing to do is to ask us. No ?

First conclusions

We can see the different levels of support in these examples. Moreover, there is also an inconsistency of color rendering between some email clients: a hexadecimal color code will not display the same color everywhere... This includes all elements where a color is specified via HTML attributes and CSS properties bgcolor, background-color, color, background : That is, mainly text and background colors.

color variations in dark mode email
Example of interpretation of the same hexadecimal code according to three email opening environments in Dark Mode

This can lead to a disruption of the brand's identity, loss of reference, bad image of the brand because of a bad user experience. If an email is not "visually" pleasant to look at in Dark Mode, it can harm the user experience, and lead your recipients to leave the email...

So how do you try to ensure that emails are pleasing to the eye despite this Dark Mode? This is a new challenge for email integrators. Here are some concrete solutions in order to manage it as well as possible.

Solutions

The meta tags

If you want to go far enough in working on your emails for Dark Mode, you can already add meta tags in the  of your email to help your email client identify that you support dark and light modes:

<This is the first time I've ever heard of a supported-color-scheme, and I'm sure it's the first time I've heard of a supported-color-scheme.

Also add a root: in your CSS in the  tag present in the , like this:

:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}

If your recipient has applied the Dark Mode on their email service, these tags will ensure (in principle) activation of the dark mode.

Media queries

Some email clients also support the media query criteria preferences-color-scheme. This criterion was born with the appearance of Dark Mode and is not specific to email. Basically, it allows you to ignore the default color inversions in dark mode and specify your own dark mode theme for your emails. This also usually requires two mock-ups of your email: one version for Light Mode, and another for Dark Mode. This way you will know where to go rather than fumbling around. This criterion is written like this:

@media (prefers-color-scheme:dark) {
/* css specific to the Dark Mode version of your email */
}

This method works in much the same way as applying a style block in a query @media for your Mobile Responsive view, except that this CSS block targets any user interface set to dark mode. @media (prefer-color-scheme: dark) allows you to create the most robust custom dark mode themes where you can implement anything from dark mode specific image swaps, hover effects, background images... pretty much anything you can do with traditional CSS! But like any workaround or solution in email marketing, it is not universal and does not work everywhere. Gmail for example does not support this feature. This feature is mostly available on iOS, Apple Mail and some versions of Outlook.

Play with the [data-ogsc] attribute

This is a method raised by Mark Robbins to target the Outlook application. While this seems to be a fairly narrow market share, it is relatively easy to simply duplicate the styles @media (prefer-color-scheme: dark) that you have already applied and simply add the prefixes [data-ogsc] appropriate to each CSS rule.

For the first and second method, it is necessary to add an important !to your CSS properties so that they take over the rest.

What's next?

There are still other solutions to get around the bad rendering of an email in Dark mode, each one more complex than the other. The blending method for Gmail for example, developed by Rémi Parmentier. Or play with gradient gradients in CSS as proposed by Annett Forcier (who created its own emailing agency, emailboutique.io) . But all this requires a lot of time... And the time to spend is to be estimated with good knowledge of certain data.

Some good practices to improve the Dark Mode in emails

  • Use of Transparent PNGs for non-rectangular images so that there are no unsightly white backgrounds and the background color is a solid CSS color.
Example of an image in PNG format, with transparent background
  • Do not use no transparent gifs it is rare that gifs are "totally" transparent: on the edges, there is always a small dirty gradient (especially when it comes to images that are not square).
  • Use high-contrast text and background colors so that even with partial and complete color reversal, your message is still readable.
  • Apply borders or shadows on the pngs so that they remain readable whatever the background color: for example, if a dark logo is planned on a white background in light mode, it is very likely that this same logo will appear on a dark background in Dark mode: the images do not change automatically... This border or shadow must be of the same color as the background color in light mode.
Border added on PNG visual
  • Be careful when using background images with HTML text on top: the background image will not change in Dark Mode, but it is likely that the color of your text will change. So make sure that your text, if the colors are reversed or changed, remains readable above the background image.
Example of a background image in PNG with a solid background color and text on top
  • If you choose to put text on an image, avoid using pure white (#ffffff) or pure black (#000000). These are likely to be exchanged for other colors when dark mode is activated. On the test palettes, we can thus realize that pure white will be replaced by a dark gray, while a less pure white will not always be "reversed".
Tests performed on different shades of black and white
  • Try changing your cell background, email body, or table background to black without changing the content colors to see what it might look like on Dark Mode in some cases.
  • The color in the images is not changed, only the colors in the CSS. We could therefore tend to go for an easy solution and use many more images in the email. Don't go for this solution!
  • Avoid mixing images and background colors: the color of the image will not be modified, when the background color designed in CSS will be. Think about a button with rounded corners: if you design your rounded corners in image, be careful about the rendering on Dark Mode!
Example of Dark Mode rendering problem on an email when rounded corners are managed in image
Example of Dark Mode rendering problem on an email when rounded corners are managed in image
  • Always try to design as much text as possible in HTML to allow the colors to change if necessary, or to modify them if you wish.
  • Separate textual and visual content.
  • The simplest designs are sometimes the best.
  • Test, test, test!

Yes or no: is Dark Mode worth the effort?

Already, it is very risky to see only through the prism of the "yes" or "no". Everything is not black and white, so to speak. There are several levels of consideration of the Dark Mode and several possible solutions, as we have just seen. In any case, you need to establish at least the minimum level of consideration, namely the few good practices seen above.

The excuse of gracious degradation

We could also talk about acceptable degradation in terms of rendering on Dark Mode. Acceptable degradation is, in short, the principle according to which, as long as the email remains readable in terms of its content and the structure does not change radically, then everything is fine. But acceptable degradation should not be used as an excuse, it is not synonymous with "je-m-en-foutisme. And it does not exempt you in any case from testing to know the rendering of your campaigns when the Dark Mode is activated. Email preview platforms like EmailonAcid or Litmus will allow you to obtain an email rendering on this type of configuration.

Get to know your audience

Second, you also need to get to know your audience so you can best decide what level of support to implement. If you know your audience and have numbers on how many of your recipients are using dark mode, it's a great opportunity to start a discussion about the level of support.

Don't forget that 2% on a database of one million recipients still represents 20,000 subscribers. So it is not just 10 recipients that could be ignored! Consider well your percentage of consultation in Dark Mode according to the total volume of your Base.

Finally, you should still know that three of the largest email service providers have announced the arrival or coming of a specific dark mode since 2019: Apple, Outlook and Gmail. This can be a strong argument to at least understand that Dark Mode can definitely not be put aside completely.

How can I detect or know who is checking my emails with the Dark Mode activated?

It is highly likely that a significant portion of your customers already prefer and use the dark mode. But for now, this is just an easy guess. For Dark Mode, you can use, besides guessing, deduction, numbers, and technique!

Deduction

Users can use the dark mode only at a certain time and for a certain period of time. And this is possible both on Desktop and Mobile. You can automatically switch from light to dark mode at 9pm for example, when your environment automatically becomes darker. You can also take this information into account depending on the time you shoot your campaigns. Or according to the opening time of your campaigns.

It is possible to know the consultation habits of your recipient on the consultation of your website if it exists: in principle, you should be able to recover the percentage of Internet users accessing your site with the Dark mode activated. You can therefore deduce potentially a choice as to the level of support you will need to put in place in your campaigns.

The numbers

There are also polls on the subject: regular polls in the #emailgeeks community show that about 20% of people use the Dark mode.

Surveys of marketers show that 59% test their emails in dark mode. And 20% moreover planned to start testing dark email in the near future. If marketers are crescendoing towards testing dark mode campaigns, we can deduce that the number of recipients viewing their emails in dark mode is also crescendoing.

The technique

Try to know the opening environments of your recipientsYou will be able to find out which care methods will be supported or not, and thus make the right choice! You can ask the question directly when you subscribe to your newsletter. Or through a questionnaire on social networks. Or via a specific email campaign...

Finally, a technical solution that I will share with you today, and which comes from Jay Oramemailing integrator at Action RocketThis consists in setting up a background image that will be called only if the Dark Mode is activated with the media query preferences-color-scheme for example. With this image tracked, it is then possible to recover the percentage of consultation on Dark Mode.

Hey - no secret! Happy to share! Basically if you use background-image: url( tracking-pixel.gif ) in the  the image is only downloaded when needed, where as all other images in the <body> will be downloaded as soon as the email is openned. So - if you put a background image in the preferences-color-scheme media query or with [data-ogsb] tag - it will only load for a dark mode user.Jay Oram

Case study.

I would now like to read you a passage from an article about the difficulty of coding an emailarticle written by Stoil Stoychev, emailing integrator. As he imagines a fictional discussion between a web developer (that is to say, himself a week before coding an email) and an email guru (him one week later)he comes to address the issue of rendering images ...

- If an image loads in an email, it will usually look as expected. Unless, of course, the dark mode is enabled...
- Do the images change when displayed in dark mode?
- No. But everything else changes. A dark font on a light background becomes a light font on a dark background, etc. Images remain unchanged, but may look "weird" in the new color scheme.
- It looks great! Can I force my email to always display in clear mode?
- No.
- But still, the Mail application on my Mac is set to dark mode and still displays my test emails in the original color palette!
- The Mail client on Apple devices usually retains the original color scheme if the email contains images. But other clients will always impose the dark mode colors.
- Can I detect if the client is set to dark mode?
- Yes, you can use the CSS media function preferences-color-scheme.
- Let me guess: it is not universally supported?
- Yes, it is.
- Is anything else supported? Can I use CSS?
- Of course you can use CSS! Just make sure you check individually for support for each CSS property you will use.
- OK. Back to the image: how can I make it work in light and dark mode?
- Just come up with a design in which the images look "good" in both light and dark modes.
- And this design should also look good if the images are completely blocked?
- Exactly! You begin to understand! Stoil Stoychev

This discussion perfectly illustrates the complexity not only of coding emails, but especially of taking into account the Dark Mode in email marketing. It's a subject made of "it depends", subject to multiple conditions. A real knotty bag, a puzzle, that every email integrator encounters daily.

Conclusion

The Dark Mode, whether it is email or not, is a choice made by the user. So by your recipient. He configures his screen consultation parameters. It is not a default setting, or an innate configuration of the machine. It is a user's choice and it is important to understand this. And it is therefore necessary to know how to respect its choice. If a recipient decides to block all the images in an email when he receives it, we can't go against his will and want to display the images at all costs... The example is pushed to the extreme, but that's the state of mind: we can't go against the recipient's choice, which may expose him to rendering problems.

Should we therefore try to counteract the rendering of an email on this configuration? Should we improve the numerous bugs that the Dark Mode in emailing can cause? Can this be part of graceful degradation or acceptable degradationin the same way as rounded corners are not displayed on some versions of Outlook for example?

Moreover, we know that HTML email integration is already a challenge in itself, subject to multiple constraints of interpretation of tags, HTML attributes and CSS properties. Should we therefore add to the email integrator's work the resolution of bugs on Dark Mode, when he must already manage the multiple issues of Outlookof the 120DPI, accessibility in emails and production times are getting tighter and tighter?

It's an open and rhetorical question, which I'll leave you to think about... In any case, looking for pixel-perfect rendering is a utopia in the email marketing world.

And the Dark Mode in email, on the long term, what does it give?

The Dark Mode is not only a fashion effect. It's a trend that promises to last. And it is not specific to emailing!

It is also important to understand that The Dark Mode is not specific to the emailing integrator. Or to the Designer. They are both the guarantors. And I think that many of you will feel directly concerned. If you need help with this delicate subject, we are here!

Sources