Dark Mode Guide for Email Template

Dark Mode Guide for Email Template - Curious about how to design dark mode for email templates? This article will guide you step by step through the full coding process of creating dark mode and discuss the pros and cons.

Dark Mode Email Design Guide

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.

 

 

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)

@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;">
                      <img class="light-img" src="https://braze-images.com/appboy/communication/assets/image_assets/images/6217186b01024c3ca3b00f93/original.png?1645680747" width="152" height="auto" alt="Logo" style="color: #33373E; font-family:'Inter', Helvetica, Arial, sans-serif; text-align:center;" border="0" />
     
                        <!-- 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 class="dark-img" style="mso-hide: all;display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; mix-blend-mode:screen;" align="left">
                              <img src="https://braze-images.com/appboy/communication/assets/image_assets/images/62171890c57df55daa2c45ef/original.png?1645680784" width="152" height="auto" alt="Logo" style="color: #33373E; font-family:'Inter', Helvetica, Arial, sans-serif; text-align:center;" border="0"/>
                        </div>
                        <!--<![endif]-->
                    </td>
                  </tr>
                  <!-- Logo ends -->

Final Words:

So, these are some dark mode email best practices! Try this out 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.