Dark Mode Compatibility in HTML Email

In 2018 Apple introduced Dark Mode to their desktop email client with MacOS Mojave, then with iOS 13 in 2019 Dark Mode was released for Apple Mail on the iPhone. Since then it’s been a race for other email clients to add Dark Mode as others follow suit, including Gmail and Outlook with some limitations to styling.

When Dark Mode is enabled in email clients they will invert the colors of your backgrounds, text, and button colors by default but we can also add our own custom styling with a Dark Mode specific media query.  Certain clients, such as Outlook 365 on Windows 10, won’t render the Dark Mode specific CSS but will invert the colors.  For the latest email client compatibility, check out this Litmus Article on Dark Mode in Email for updates.

How do you develop for Dark Mode in HTML Email?

Making your HTML Email Templates Dark Mode Friendly starts with adding meta-data in the section of your document.  The meta-data used in HTML Email are the same tags used for Dark Mode in web browsers, so adding the following code to your HTML document will make the background dark by default if your operating system allows it:

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

Now we have the option to add our custom styling for Dark Mode, email client permitting, using the following styling:

<style type="text/css">
:root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
  }
</style>

Once the “root” styling selector is added to target the HTML document itself, matching the “color-scheme” and “supported-color-schemes”, we can add the Dark Mode specific styling. As an example, if the background color of our email template is black by default (#000) and the text is plain white (#FFF), we can add the following style for dark mode to make the background a dark gray and the text a very light gray for less contrast:

body {
    background:#2d2d2d!important;
    color:#f0f0f0!important;
}

Dark Mode Best Practices

When designing for dark mode it’s important to use images that have transparent backgrounds (PNG files) instead of JPG for circular images as an example because you’ll see white edges. Similarly, when adding images such as logos you can make them interchangeable between light and dark mode by adding a white outline to the image.

..continue to the next lesson: CSS Styling in HTML Email.