DEV Community

Ovi Demetrian Jr
Ovi Demetrian Jr

Posted on

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
  •, 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

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, 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 { }
Enter fullscreen mode Exit fullscreen mode

For background color:

[data-ogsb] .classname { }
Enter fullscreen mode Exit fullscreen mode

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) { }
Enter fullscreen mode Exit fullscreen mode

A meta tag is required for some email clients:

meta name="color-scheme" content="light dark">
Enter fullscreen mode Exit fullscreen mode

Along with CSS definitions as well:

:root {
  color-scheme: light dark;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

rossangus profile image
Ross Angus

This is a very important post: I read my email on a Windows 10 tablet with dark mode on and using Microsoft Mail (I know, I know, it's terrible). A huge number of promotional emails are barely legible and I'm surprised this technique isn't better known.