Levels of email dark mode

Setting up your email’s design for dark mode isn’t really a choice since some email clients will do it anyway. This includes Gmail and Outlook which will invert background colors and text. This leads to potential accessibility issues that make your designs hard to read, or in some cases, completely unreadable.

Forced dark mode

So you’ll have to adapt to the way email clients treat your design for dark mode. The way to do this is to first test your email template in the email clients that will force color changes for your design. The email clients to look out for are:

• Outlook 2021, Office 365, and Windows Mail, on Windows - all do a full invert of colors across the board
• Outlook.com, on Windows (across all browsers) - will invert some colors, but doesn’t always invert all background colors or text of certain elements, like buttons
• Gmail app, on iOS - also does a full color invert
• Gmail app, Android - partially inverts colors, similar to Outlook.com

Use Email on Acid or Litmus to get a range of test environments to look at.

Making adjustments

You can adjust some aspects of your design where necessary to account for the changes. Make sure your logo and transparent graphics look good on a darker background. Consider adding an outline around your logo to ensure it’s readable. Avoid text over background images since images don’t get inverted, but the text will.

For Outlook.com, attributes are added to elements that change colors. So you can refer to those attributes and overwrite their changes by including classes in your HTML and then targeting them in your <style>:

For text color:

[data-ogsc] .classname { }

For background color:

[data-ogsb] .classname { }

Unfortunately, there are no other standard methods for adjusting colors for the rest of email clients that force dark mode.

Optional dark mode

Email clients that don’t force dark mode will allow you to set your own dark mode color scheme by having you use a media query in your <style> to specify what you want elements to look like:

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

A meta tag is required for some email clients:

meta name="color-scheme" content="light dark">

Along with CSS definitions as well:

:root {
  color-scheme: light dark;
}

For an example of a full template using dark mode, take a look at the Starter template.