Dark Mode Email: How to Design Emails for Dark Mode

Jun 6, 2022 | Uncategorized

It’s the design sensation that’s sweeping the tech industry: dark mode. As part of iOS 13, Apple introduced dark mode to its mobile clients, and the rest, as they say, was history.

Google soon introduced dark mode to Gmail users, along with other tech giants. So, it comes as no surprise that many of your email subscribers are checking their emails in the dark.

But how do you make sure you send out optimized emails designed for dark mode? In this guide, we’ll break down how you can design the perfect dark mode email.

What Is Dark Mode?

Before we can get into designing for dark mode, we need to have a good understanding of what it actually is — and how it works.

Dark mode utilizes a darker color palette. This means using black or dark gray backgrounds in places where they used to be white.

It was initially designed to make using your phone in darker or nighttime settings easier on the eyes. With light typography and darker backgrounds, it has taken over as one of the most popular design trends in years.

Its popularity isn’t without reason. Many people prefer using dark mode at all times because of its many benefits, including:

  • Minimizing eye strain, especially in darker settings
  • Saves battery life by reducing screen brightness
  • Easier to read for some users
  • Reductions in migraines for users with photophobia

Some people might just have a personal preference for the darker design. Whatever the reason, dark mode is a trend that is surely here to stay.

Just as web designers have adapted to dark mode, email marketers must, too.

How is Dark Mode Changing My Emails?

Different email clients have different dark mode settings. So, they’ll each display your emails a little differently. This can make creating dark mode emails a little difficult.

Currently, there are three identified types of changes that will happen in dark mode. These include:

No Color Changes

When some email clients’ interfaces change to dark mode, they don’t affect the rendering of your HTML emails at all. That means that your email will look exactly the same, even if the UI itself is in dark mode.

The light mode design of your email will be automatically rendered. They will only show in dark mode if you build a dark mode design into your code.

The clients that do not change your colors include:

  • Apple Mail
  • iPhone
  • iPad
  • Hey.com

You should be aware of a few exceptions, though.

To start, plain text emails will trigger a dark mode theme. To block dark mode from applying to these types of emails, use a 2×1 image. This allows you to retain your plain text feeling, while still including a 1×1 tracking pixel.

Additionally, if you leave <meta> tags related to dark mode in your email template, Apple and its in-house applications will convert the white background to a dark gray. You can override this with your own custom dark mode designs. You can also opt to use an off-white background instead of pure white.

Default vs. Custom

There are a few clients that will automatically convert your emails to their default dark mode. This is unless you build in your own custom dark mode design. This allows you to avoid the sometimes unpleasant default styles.

Building a custom dark mode design requires some CSS work, though. This may not be for everyone.

Even if you do not want to get into the nitty-gritty of code, there are still some ways you can improve your email design to be functional for both light mode and dark mode.

In general, email clients will change your email design for dark mode in one of two ways. These include:

Default Themes: Partial Color Invert

Some clients will convert your email to the “partial invert” default style. This is when they simply change light backgrounds to a dark color and dark text to a light color.

Usually, places that already have dark backgrounds are not changed, salvaging at least some of your email design. For this type of color inversion, it is best to be sure all of your images and logos are using a transparent background. This will prevent unsightly boxes from forming around these images.

Outlook.com is the most popular email client to use partial color inversion for users in dark mode.

Default Themes: Full-Color Invert

Full-color inverts will completely change the design of your emails. These impact not only light backgrounds but dark ones, as well.

This is particularly invasive when you already have a dark mode email design. Even though it doesn’t seem very intuitive, this default style will turn your already placed dark backgrounds a lighter color.

Unfortunately, popular email clients such as Gmail on iOS and Outlook 2019 on Windows use this default theme. There is also no way to target dark mode on these clients at this time, so even custom coding won’t prevent this.

The best thing to do here is to follow as many dark mode optimization tips as possible. They will minimize some of the negative effects of this default option.

How to Design a Dark Mode Email

If you are targeting dark mode across various email clients, you need to be sure that your dark mode experience is optimized.

Follow these dark mode email tips to improve the dark mode experience for everyone on your email list.

1. Optimize Images for Every Style

Images and logos can suffer the most when UI switches into dark mode. That’s why you need to be sure you are optimizing them for any style.

You can do this by adding a transparent outline to your already transparent PNGs. Use dark text for legibility on clients with full-color invert default designs.

Choose transparent background whenever possible. This eliminates many dark mode conversion problems, whether the client uses partial or full-color invert.

Since easing eye strain is one of the benefits of dark mode email, you don’t want to ruin it with your logos and images.

2. Utilize Transparent Dividers

If you plan on using dividers in your email, be careful not to include any background colors. To optimize for dark mode, use transparent dividers instead.

Using transparency wherever possible ensures that your design won’t change to something unpleasant depending on the reader’s UI settings.

3. Update Your Icons

Social media icons are a common feature of most email footers. Don’t neglect them when it comes time to design for dark mode. In fact, many times these icons are completely lost when the UI shifts to dark.

We recommend adding a 2px stroke around these icons. This acts as a bit of a highlighter, ensuring that they don’t get lost or become blocky during any dark mode shifts.

4. Utilize Plain Text Emails

Why make things difficult for yourself? Instead of fussing about design and code, you can also opt to send a plain text email.

Plain text emails are easily shifted into dark mode. Light backgrounds will simply become dark and dark text will become light. Without other elements to worry about, this transition is incredibly simple.

However, plain text emails might not be the best choice for those who want to maintain a specific aesthetic. Sometimes, your design is a big part of your marketing. You don’t have to sacrifice your design just for dark mode.

5. Target Dark Mode

If you feel comfortable with your CSS skills, you can add your own dark mode commands right into the code. These overrides provide you with control over how readers view your email when in dark mode.

The only email platforms where your custom code will not be effective are Outlook 2019 for Windows and the Gmail App for both iOS and Android. These limited platforms will unfortunately do their own things when it comes to dark mode.

For those who are uncomfortable with CSS work, or need to brush up on their skills, there are plenty of courses and professional help available online.

Final Tip: Update and Test Constantly!

Dark mode styles and settings are constantly changing. Websites and email clients are constantly modifying the way they handle dark mode in design using reader and developer feedback alike.

Test the rendering of all your emails before sending them out to your subscriber list. This puts your mind at ease knowing your subscribers will have a flawless reading experience each time they open one of your emails.

You should continue to play with and tweak your dark mode email design to ensure it stays up-to-date and convenient for your readers. Professional support may be able to help you in this arena, as well.

Respect Your Readers: Optimize for Dark

There’s no wrong choice between light or dark mode. Respect your readers by ensuring your emails will look great on either UI style. The design doesn’t have to suffer on a dark mode email.

To stay in touch, join my Facebook Community. Here you’ll learn key marketing tips and find support to help your small business make a big impact.