Dark Mode for Email

Hello Dark Mode, my new friend.

Have you ever opened your phone while in bed and been blinded by the brightness of your screen? Or maybe you’ve been in a movie theater and were suddenly distracted by another moviegoer’s staggeringly bright screen from the row below. We’ve all encountered this experience in one way or another and know how frustrating it can be. Luckily, a solution has been developed.

Enter: Dark Mode.

In iOS 13.0, Apple adopted the dark system-wide appearance and called it Dark Mode. In Dark Mode, “the system uses a darker color palette for all screens, views, menus, and controls, and it uses more vibrancy to make foreground content stand out against the darker backgrounds.” Not long after, Android, Gmail, Slack, Google Chrome, and several others adopted this same mode.

But why do we need Dark Mode?

Ultimately, Dark Mode minimizes blue light and enhances readability to reduce eye strain. It’s also ideal for people with light sensitivity. Google has also confirmed that using Dark Mode on OLED screens can help with battery life.

So, what does Dark Mode mean for the world of email?

When it comes to design trends, it’s essential to keep up (you can find our other trend predictions for 2020 here, The Email Design Trends for 2020). Dark Mode is here to stay, and with that permanent change comes the necessity to adapt. You don’t want to be the solitary email sender with the stark white email that shocks recipients utilizing Dark Mode.

How do I implement Dark Mode?

The upside of Dark Mode is that is does not impact HTML emails by default; it’s only applied to plain text emails. So, whether the email app is set to Light or Dark Mode, your HTML email will look exactly the same.

But to implement Dark Mode on your HTML emails, you have to put your CSS to work. This is where prefers-color-scheme comes in handy.

prefers-color-scheme

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme. An example looks like this:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #3D3E40;
    color: #FEFEFD;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #FEFEFD;
    color: #3D3E40;
  }
}

This sets both the background and text color for both Light and Dark Mode. While not every web browser or app supports the prefers-color-scheme media query, you can find out which ones do and don’t here.

From an accessibility standpoint, you also want to use font colors that don’t have too much contrast. Pure black (#000000) and pure white (#FFFFFF), as well as colors that clash or are not complementary, can cause too much eye strain because of such a harsh contrast. A contrast ratio around 11.5 is a good start.

Logos for Dark Mode

Most brands have logos with both light and dark colors, and they’re usually on transparent backgrounds. These are two crucial factors for assuring that your branding appears correctly in both dark and light modes.

Since email clients don’t invert image colors, this is something you need to execute yourself. Again, this is where prefers-color-scheme comes into play. sidemail.io has created a handy solution for this:

CSS:
@media (prefers-color-scheme: dark) {
  .darkLogo {
    display: none !important;
  }

  .lightLogoWrapper,
  .lightLogo {
    display: block !important;
  }
}
HTML:
<image src="dark-logo.png" class="darkLogo" />

<!--To hide the light logo perfectly in Outlook and Windows 10 Mail, 
you need to wrap the light logo image tag with a div.-->

<div class="lightLogoWrapper" style="mso-hide: all; display: none">
<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

An implementation like this covers all your bases, from ensuring that there is always a visible logo, whether an email client does or doesn’t support Dark Mode or prefers-color-scheme.

In addition to this process, you can also add a translucent, white outline to your transparent logos that have dark text. This would make it so even if you use only your dark logo, it’ll still be visible on a dark background.

Test, Test, Test

As with anything involving code, you must test, test, and test again. It’s absolutely crucial to test your designs in both Light and Dark Mode, to ensure that everything is visible to every viewer. Email clients are constantly changing, so it’s important to keep up with their features.

Testing your Dark Mode email is as simple as sending yourself the designed-for-Dark-Mode email, then enabling Dark Mode on your device. You can always use an editor like Litmus to test your Dark Mode emails.

So, who’s using it?

At the time of writing this blog post, some of the largest email clients and apps offer Dark Mode:

Apps:

  • Apple Mail (iOS)
  • Gmail (iOS and Android)
  • Outlook (iOS and Android)
  • Spark (iOS and Android)

Desktop:

  • Apple Mail
  • Outlook 2019 (Mac OS and Windows)
  • Spark (Mac OS)

Web:

In addition to these email clients, there are plenty of other brands out there using Dark Mode. Some including:

  • Spotify
  • Slack
  • Hulu
  • YouTube
  • Twitter
  • Facebook Messenger
  • Reddit

While implementing Dark Mode in your emails may seem like a fairly easy task, it will create a huge impact on your viewers. Less eye strain, not as much blue light, some battery conservation, and best of all – no more being blinded by that obnoxious moviegoer one row below you.


 

  • Does Dark Mode make a difference in your personal use?
  • Do you think Dark Mode can have a long-lasting benefit on eye strain?
  • Which mode do you really prefer: Light or Dark?

 

 


Leave a Reply

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.
%d bloggers like this: