Dark Mode Guide for Email Template

Dark Mode Email Design Guide

Speaking of email templates, they are very easily modifiable. Whether the email is opened on a smartphone, tablet, or computer, it will look fantastic, perform well, and be simple for the recipient to read thanks to a responsive email template that automatically adjusts to any screen size. Even if you choose a free email template, there are different themes and modes to choose from.

When it comes to dark mode, there are three fundamentally different types of color schemes that email clients use to apply Dark Mode email templates:

No Color Changes.
Partial Color Invert.
Full-Color Invert.

HTML email templates - Dark mode email templates

No color changes:

There’s no impact on how your email is rendered. The email will look exactly the same in light mode and dark mode. The following clients approach in this way:

Apple Mail
iPhone
iPad
Hey.com

Partial Color Invert:

Only detects areas with light backgrounds and inverts them so the light backgrounds are dark while the dark text becomes light. The email clients will generally leave areas that already have a dark background alone, resulting in a fully dark mode design. The following clients support this:

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

Full-Color Invert:

This is the most invasive color scheme and a dark mode email example. Not only inverts the areas with light backgrounds but also impacts dark backgrounds. The light backgrounds have been converted to dark versions of the original colors. And text areas that previously had a dark background with light text are now light with dark text. The following clients support this:

Outlook 2019 (Windows)
Gmail App (iOS)

Check Dark Mode Email Client Support Chart

Points to be considered for dark mode images and optimize them accordingly:

Choose images and logos that will stand out in both light and dark modes.
Use transparent, background-less images whenever possible.
Add a white stroke to make dark fonts, logos, and images stand out.
Try to avoid using images that match the background color.

You may have questions such as how to design email for dark mode? Can you make Gmail dark mode? In brief, we can target Dark Mode and swap the images, as most brands have a logo design specifically for dark background colors.

Final Notes:

By the way, you don’t need to design a completely different email, especially for Dark Mode if you don’t want to – default inversions look good sometimes for your templates in most of the clients.

Not all emails look bad in Dark Mode. The easiest way to find out how your email will look is to view your email through a Partial Color Invert and a Full-Color Invert email client like Outlook.com (on desktop) and Gmail on iOS. You can also use email testing platforms like Email on Acid or Litmus. You might find you don’t need to do anything at all.

However, adding in your own Dark Mode overrides will help you control how your email is viewed by dark mode clients.

Coding tips for how to design dark mode:

Enable dark mode with meta tags and : root selector:

<meta name=”color-scheme” content=”light dark”>

<meta name=”supported-color-schemes” content=”light dark”>

<style type=”text/css”>

:root {

color-scheme: light dark;

supported-color-schemes: light dark;

}

</style>

How to make your emails dark mode (2 ways):

@media (prefers-color-scheme: dark)

This method works in very much the same way as applying a block of styles inside a @media query for your Mobile Responsive view, except this CSS block targets any user interface that’s set to Dark Mode. @media (prefers-color-scheme: dark) allows you to create the most robust custom Dark Mode themes where you can implement anything from Dark Mode-specific image swaps, hover effects, background images… basically, almost anything you can do with traditional CSS!

[data-ogsc]

This is a method first brought to our attention by Mark Robbins to target the Outlook app. While it seems like a pretty narrow market share, it’s relatively easy to simply duplicate the @media (prefers-color-scheme: dark) styles you already applied and simply add the appropriate [data-ogsc] prefixes to each CSS rule.

@media (prefers-color-scheme: dark):

@media (prefers-color-scheme: dark) {

.light-img { display:none; display:none !important; }

.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Custom Dark Mode Background Color */

.darkmode { background-color: #000000 !important; }

.light-darkmode { background-color: #333333 !important; }

/* Button border for dark mode */

.button-border { border: 1px solid #ffffff!important; }

/* Custom Dark Mode Font Colors */

td, p, span, a, b { color: #ffffff !important;}

}

We can add this to your email’s <style></style> section to create custom dark mode styles for iOS, Apple Mail, and some versions of Outlook.

Repeat all styles with [data-ogsc]:

[data-ogsc] .light-img { display:none; display:none !important; }

[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Custom Dark Mode Background Color */

[data-ogsc] .darkmode { background-color: #000000 !important; }

[data-ogsc] .light-darkmode { background-color: #333333 !important; }

/* Button border for dark mode */

[data-ogsc] .button-border { border: 1px solid #ffffff!important; }

/* Custom Dark Mode Font Colors */

[data-ogsc] td, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important;}

Targeting Dark Mode and Swapping The Images:

Add the right classes and styles to your dark mode-specific elements or images:

<!– Logo Started –>

<tr>

<td style=”text-align: left;”>

<!– The following Dark Mode logo image is hidden

with MSO conditional code and inline CSS, but will be

revealed once Dark Mode is triggered –>

<!–[if !mso]><! –>

</div>

<!–<![endif]–>

</td>

</tr>

<!– Logo ends –>

Final Words:

You can also try out a few best practices for email design and development in general. As for dark mode, if you’re wondering how to design for dark mode or how to do dark mode in Gmail, remember, not all these fixes will work across all clients, and, no matter how much we try, our dark mode emails might end up looking slightly different across different apps and providers.

So, these are some dark mode email best practices! Are you looking to take your email campaigns to the next level? Our custom email developer agency can help you create engaging and effective emails that resonate with your target audience. Whether you’re looking to implement dark mode or try out some best practices for email design and development, our team of experts can guide you through the process and provide you with the tools and knowledge you need to succeed.