Ultimate Guide to Dark Mode Emails

Kristina Lauren

June 13, 2022

Dark mode is all the rage these days, and for good reason—with just a few taps, you can change the overall look of your device to a darker color scheme that’s easier on your eyes and more pleasant to look at in low light. This interest has also spilled over to the world of email marketing, encouraging more email developers and designers to come to the dark side.

In this post, we’ll talk about the benefits of dark mode, how you can design your own dark mode emails, and some tips for dealing with email clients.

What is dark mode?

Dark mode is a design trend that flips the script on the traditional white-on-black color scheme. In dark mode, text and other interface elements are displayed in dark colors against a light background. This makes for a visually pleasing, easier-on-the-eyes experience when reading or using an app or website in a low-light environment.

Dark mode is perfect for people who spend a lot of time staring at screens, as it can help reduce eye fatigue. It's also been shown to improve battery life on devices with OLED displays.

What are the benefits of dark mode emails?

While dark mode is definitely aesthetically pleasing and trendy, it also offers some nice advantages for users.

Relieves Eye Fatigue

The blue light that most screens from our everyday devices give off can unfortunately cause a lot of strain on the human eye. Since so many of us are working long hours and staring at screens for most of the day, it's more important now than ever to make sure we're taking care of our eyes. Dark mode is a great way to do that because darker colors are much easier to look at, which improves readability and focus.

Reduces Screen Glare

When an email is displayed in light mode, the bright background can cause a glare that makes it difficult to read. This is especially true if you're trying to read your email on your phone while outside in direct sunlight. Dark mode eliminates this problem by reversing the colors so that the text is white and the background is black. This makes it easier to read your email no matter where you are.

Helps Save Your Device's Battery

Dark mode has been shown to save battery life on devices because your device doesn’t have to work as hard or use as much power to display a dark color compared to a light one. This is especially beneficial on mobile devices, where battery life is often shorter than on laptops or desktop computers.

Which Email Clients Support Dark Mode?

A growing amount of major email clients support dark mode up to a point, but here’s a breakdown of what options are available for mobile apps, desktop apps, and the web.

Mobile

Desktop

Web

How exactly does dark mode affect email design?

While dark mode varies as far as availability on certain platforms, it also varies as far as how it displays on different clients. The best way to categorize these differences are by how the clients affect elements within an email design. Some don’t affect the design at all, some only affect it a little bit, and others switch things up dramatically. Let’s take a look.

No changes

These clients won’t make any automatic changes to your emails. This means that any elements of your design, including images, font colors, and buttons, will display the same way in both light mode and dark mode.

Apple Mail
iPad Mail
Hey.com

Partial invert

Some clients will only partially impact the look of your emails by inverting areas with light backgrounds. Areas that appear dark already won’t be affected for the most part.

Outlook.com
Outlook (Mac OS)
Outlook App (iOS and Android)
Gmail App (Android)

Full Invert

Full color invert clients affect both light and dark backgrounds. This means that light areas will invert to display as darker colors but it also means that the same will happen with dark colors.

Outlook (Windows)
Gmail App (iOS)

What are some tips for designing dark mode emails?

Make image backgrounds transparent

When possible, make the backgrounds of your graphics transparent, specifically logos and social media icons. The idea behind this is to avoid images displaying strangely if your recipient’s email client is set to dark mode. Sometimes if the background colors of your images are inverted, you could be left with a block around the image that may not match the rest of the email. But when the background is transparent, the image will look the same whether it’s displaying in dark or light mode, giving it a cleaner, more cohesive look.

Add a white outline to dark images and text

On the flip side, adding a light outline to certain images may help them stand out more. You’d likely want to consider this with a logo or icon, especially one that is typically a darker color. In light mode, the outline won’t show up, but in dark mode, it will help shape the image and improve its visibility.

Be aware, however, that this may not be ideal with all graphics, including logos. If adding an outline makes a logo unrecognizable or goes against branding standards, it’s probably best to leave it out and use another alternative.

Use Media Queries

Media queries allow you to change the design and layout of your email based on the client's capabilities. This is probably the most common way to make emails compatible with different email clients.

For example, you can detect whether recipients have their interface set to light or dark mode and display specific elements for each theme. To do so, use the following CSS block:

@media (prefers-color-scheme: dark) {
  .dark { background:  #000; color: white; }


@media (prefers-color-scheme: light) {
  .light { background:  #bbb; color: black; }
}

The example above would just affect the background color and font colors in the email, but you can also use these media queries to change out images, buttons, or any other element with CSS.

Use [data-ogsc] prefix for Outlook

Unfortunately, media queries alone may not work for recipients using the Outlook app, but the good news is that if you just insert the [data-ogsc] prefix, you can still ensure dark mode. Your code would look something like this:

@media (prefers-color-scheme: dark ) {
[data-ogsc] .dark-bg { background-color: #fff; }

Are there any downsides to using dark mode emails?

While dark mode emails offer a number of benefits, there are a few things to consider.

The first is that not all email clients support it just yet. If your recipients are using an email client that doesn't support dark mode, they'll see your email in its regular light mode instead. This could lead to some inconsistency in your branding.

Another downside is that dark mode emails can be hard to read if they're not designed well. You need to make sure that your text is easy to read against your darker background, and that your CTA buttons and other elements are still easily visible.

Is there anything else I should keep in mind when designing dark mode emails?

Make sure that all your links are visible and easy to click on. Contrast is key when it comes to links in dark mode, as you want them to be easy to spot against a dark background.
Avoid using text colors that may be jarring against a dark background. For example, colors like red or green can work just fine in a light email, but in dark mode, those colors could be difficult to read or just plain unpleasant to the eye. It’s best to stick with white, light gray, or more neutral colors.
Pay attention to your font choices. Some fonts look better in dark mode than others. Sans-serif fonts tend to work well, as do thin fonts that have high levels of contrast.

Dark Mode may not be a new feature in the email market, but it is rapidly growing in popularity among email clients and developers. Although there are some challenges involved, implementing dark mode compatibility into your email designs is a great way to show your audience that you care about their preferences and can even improve engagement.

Still looking for some guidance on designing dark mode emails? Scalero can help! Our expert email developers can design and code custom templates that will look great in both light and dark mode.

Reach out to us to get started!