What you need to know about Dark Mode Email

Now available in every operating software, dark mode in emails has gained massive popularity. Dark mode helps the reader read the email content in a dark environment. It’s also more soothing than sharp, bright light leading to less eye strain. 

In 2018, Apple introduced dark mode on their desktop email. The next year, Apple and Google introduced dark mode in iOS and Gmail, respectively. According to a report by Android Authority, 91.8% of Android users prefer dark mode. Similarly, 37% of Apple users prefer dark mode on iOS.

It has become difficult for designers to make sure emails display well in different modes. In this article, we will discuss dark mode for emails and understand how email marketers can adapt to it. Thus making email designs user-friendly with any mode whatsoever.

What is the dark mode?

Applying dark mode to your devices gives a dark background color of your device. It decreases the amount of light on the screen. The background color scheme converts light to black and the text from black to white. The dark mode uses light-colored UI elements and iconography to improve the user experience. Using dark mode gives you a comfortable experience in a darker setting or at night.

Benefits of dark mode for users

1. Dark mode doesn’t strain your eyes in the darker environment or at night.
2. As it reduces the brightness of your screen, it saves your battery life. It gives you the ability to use your device for a longer time.
3. Most importantly, dark mode helps several users to read the content properly. Thus improving overall chances of more readability.
4. Many users prefer a dark interface, as they feel comfortable with it.
5. Most night-time mobile users prefer dark mode for email responding.

Nowadays, dark mode is not just limited to your screen. Several mailing apps and operating systems have added dark mode in the emails and improved the overall user experience. 

What does dark mode email do?

Dark mode for email changes not only the user interface but also the look of the entire email content. At its basics, dark mode converts the light background to a dark one and the black font to a white one. Email software should have a CSS property for dark background, color, or HTML attribute of bg color.

If these factors are already defined, dark mode directly activates those HTML and CSS properties via internal styles. After activating the properties, dark mode balances them to make them as you need. For instance, if your font color is dark, then the dark mode will convert it to a lighter one and vice versa. The process is automated.

Email marketers rarely face issues in plain text emails as the text is black on a white background. This is easily inverted. But, marketers face problems with HTML and AMP emails. This contains a variety of components having different defined colors. With the rising number of dark mode users, email marketers face issues optimizing their email designs. They must cater to dark mode and balance email elements in dark mode.

Does dark mode email affect deliverability?

Not all emails are not optimized for dark mode as it’s a relatively new concept for email clients. Subscribers won’t try to read confusing emails if the design isn’t optimized for their device. They might not open your future emails and even unsubscribe. This could affect your deliverability and reputation.

Optimizing emails for dark mode

It doesn’t matter how complex your email design is. You can optimize it for dark mode. Let’s check out the 2 ways email marketers can easily optimize emails for dark mode.

1. Use PNG images with transparent backgrounds

PNG images with transparent backgrounds don’t make any difference when the background is changed to dark mode. Marketers don’t have to perform complex tasks to conform to the dark mode. Look out for any icons you use in your email templates.

2. Use white borders around black design elements

Transforming into dark mode might cause your logo or icon to disappear if they are not optimized for black background. So, to make sure your elements are visible in any mode, you can use white outlines around the icons and logos.

Now in any mode, users can easily read see your full content without any issues. The white outline won’t be visible on the white background. 

3. Using AMP email

AMP emails are interactive emails with many features for the receivers. One of these features is to change the mode of the email. It will need some development to optimize an AMP email for dark mode, but it can be done. This will make sure that the reader has the choice to change the mode to their preference. 

4. Font color

With a light mode theme, we could get away with gray-colored dark texts. With the rising popularity of dark mode, the background color is close to shades of gray. You must choose color schemes that work for light and dark modes like shades of yellow and green. 

5. Experiment and test

Try a new campaign with the dark mode. You are bound to find the one that works for you. Collect data on what your subscribers like and what might not work for your audience. 

6. Choose priority in email marketing 

These were some simple methods that you can apply to optimize your email content for dark mode. But, email marketers can’t move ahead with advanced transformations to solve all your emailing problems. They have a few choices except for those mentioned above:

1. Separate email templates

You can start designing emails catering to dark and light modes separately. But, it will be a tedious and repetitive process.

2. Compromise with dark mode

You can accept that the emails won’t render perfectly in dark mode. But make the overall experience better to compensate for the lack of adjustment.

In 2025, if your emails aren’t optimized for dark mode, you are already behind the competition. Look for professional help to make sure your subscribers with dark mode can read your emails.

Dark mode email code snippets

Forcing subscribers to view your email in light mode isn’t a good decision. Businesses today must provide a good experience in both light and dark modes.

Check out the following code snippets to help provide the right experience to your dark mode users. 

Add the below meta tags and root selector styles to the email:

This tells you if your device is dark mode enabled or not.

1. Add the following media query code to the email’s CSS.

Here you can adjust the colors of your brand’s preferred dark mode theme.

In the above code, “prefers-color-scheme: dark” acknowledged the dark mode, and the body tag is to set the body color for the entire email. 

But, the media query only supports clients who use WebKit as the rendering engine and isn’t supported by every email client. Because of this reason, the CSS query, as of now, only works with Thunderbird, Apple Mail app, and older versions of Outlook. But, Google does not support it. 

You can use “prefers-color-scheme” to override the dark mode and convert it into a light background color scheme. But, this CSS query isn’t supported by every email client.

You can create emails that display well without coding with the right email marketing tools, like Mailmodo.

Dark mode email client support

Different email clients such as Gmail, Apple, and Outlook render the same elements differently in dark mode. For example, some email clients automatically invert the colors, and some do only for specific situations. Only some email clients support dark and light color schemes with media queries.

Master your email client with Gmail productivity tips to become a power user.

List of email clients supporting dark mode

Here is the list you can refer to

Your email subscribers use different operating systems and mobile devices. That’s why you should test your emails in dark mode.

Conclusion: Dark Mode Email

Dark mode is getting popular. You have to make sure your emails display well in dark mode. Otherwise, your email will look awful. Or worse, your subscribers won’t even be able to read them.

This all can be avoided with some optimization and testing. Getting the right email template builders can also save you many headaches.

FAQs