dark mode email designThe increased use of dark mode over recent years has added an additional layer to the world of email design. In marketing today, you have to consider what settings your subscribers are using when designing an email.

With major email platforms such as Gmail, Apple, and Outlook using dark mode, it’s time for companies big and small to consider how their content is appearing with this accessibility function.

What Is Dark Mode?

Dark mode is a desktop and phone setting that allows a user’s eyes to relax while using their device. It changes text to white and backgrounds to black, an inversion from typical email coloring.

Here’s an example of the same email in light mode and dark mode:

Dark mode email vs light mode email design

Dark mode is used for a variety of reasons:

  • Decrease eye strain.
  • Reduce screen brightness and save battery.
  • Improve the contrast of content, making it easier to read.
  • Please an aesthetic preference.

Dark mode has become increasingly popular as more people work and relax online. 80% of Americans report using digital devices for over two hours a day, 59% of which experience symptoms of eye strain.

What Email Platforms Allow Dark Mode?

The following email platforms currently allow users to switch to dark mode:

Mobile

  • Gmail App (Android and iOS)
  • Outlook App (Android and iOS)
  • Third-party apps such as Spark and Canary Mail

Desktop

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

What Email Marketing Platforms Consider Dark Mode?

Many companies use email marketing platforms to deliver quality emails to their subscriber base. When it comes to dark mode, a couple popular email marketing platforms make it easy to adjust designs to fit this new trend.

You can take advantage of this by linking your email marketing platform to Litmus Email Previews. This pre send testing tool integrates with a number of popular email marketing platforms, including:

You can also download Litmus’ preview tool as a browser extension.

How To Design Emails For Dark Mode

Not all companies are able to spend hours developing complex email designs for a new trend. The good news is, it isn’t necessary to have a big budget and ample resources to design an email for light and dark mode.

Instead, follow these simple tips the next time you construct a company email and adopt them as a standard moving forward.

1) Use images with transparent backgrounds

Many email designers and marketers are accustomed to using images in their emails. While it may be tempting to assume that images will remain static and unharmed by dark mode, there are some challenges to consider.

Currently, many emails use images with white backgrounds because it blends in with the background of the entire email. In this case, an email will appear like this:

ThredUp Light Mode Email example

However, once dark mode is applied, the images are immediately exposed and the seamless design is broken.

ThredUp Dark Mode Email design

This can be distracting to readers and cause legibility issues. Instead, try to use images with either transparent backgrounds or designed as image blocks that are the width of your email. Adding white padding also helps. That would ensure that your email’s images are eligible regardless of setting, like so:

Banana Republic Dark Mode Email design

2) Pay attention to images with black text

If an image contains black text, it will not change to white in dark mode because email clients will not pick it up. When black text in images is not addressed, it will blend in with the background.

Society6 Dark mode email vs Light mode email design

Make sure that you add either a white outline or a translucent outline to black text. This becomes especially important if your logo includes black text, as shown above. Below is an example of how you could alter your images to accommodate dark mode.

Dark mode email design tip

3) Be careful with background colors

Combing background colors with images and buttons is a common way marketers play with email design to create beautiful emails. However, when using background colors, they’re likely to change between the dark and light modes. This can alter the way you had anticipated the colors appearing.

Background colors in dark mode and light mode email designs.

It can also cause text to blend into the background completely. When that happens, this…

H&M Light Mode email

turns into this…

HM Dark Mode email issues

To recap, make sure you are using images wisely with consideration to your background colors and fonts. While dark mode is meant to make reading easier for users, you want to make sure it doesn’t negatively impact your content.

Designing for dark mode doesn’t have to be overwhelming or time-consuming, but it is something all companies should consider moving forward.

Want to elevate your email content and design? Contact our marketing experts!