Taming forced dark mode: How to test and fix email color changes 

"Be not afraid of dark mode, some email clients support dark styling, some do not, and some have dark mode thrust upon them."

That might not be the exact quote from Shakespeare, but it does sum up the different levels of dark mode support in email. This article focuses on a tale of the latter: forced dark mode.

Forced dark mode is when email clients apply their own dark styles with little to no control from you. They take your carefully chosen colors and run them through an algorithm to generate a dark theme, often resulting in questionable results.

Let’s look at how this works in Gmail and Outlook, and how you can use a new feature in Customer.io's Design Studio to test and tweak your emails in real time.

Let’s look at this simple grid of colors in an email:

Now here’s that same email in Gmail on Android with force dark mode enabled:

Here we can see how the colors change, it’s not a linear shift. Some are darkened more than others, and some are left alone. Also, we can see how the border changes based on the background colour.

And this isn’t just Gmail. You’ll see very similar behaviour in other apps on Android, such as:

• Samsung Email
• Yahoo
• AOL
• Thunderbird
• K-9
• GMX

However, this is just on Android apps. These apps appear to rely on Chromium’s algorithmic darkening. iOS has restrictions (outside of the EU) that mean apps aren’t allowed to use Chromium for rendering, so they are unable to access that.

This also means that it’s the same dark mode rendering used in Chromium browsers, which is great news, because it gives us a way to test in the browser without sending an email after each update.

This requires a browser reload to switch on and off, so I recommend using a separate browser to avoid affecting your everyday browsing. I use Chrome Canary, (https://www.google.com/intl/en_uk/chrome/canary/) but you should be able to use any Chromium-based browser like Vivaldi, Edge, Opera, or Brave.

1. Go to the flags page: chrome://flags/
2. Search for “dark”. Depending on your browser version, the flag name may vary slightly, the one I am seeing is #enable-force-dark.
3. Enable that feature and relaunch the browser

Once enabled, you’ll see the same kind of color conversions you get in email.

When looking at this we can see this doesn’t actually make any changes to the code, it just changes how the color are rendered.

In browsers, we can also use color-scheme to controls which elements get forced dark mode applied and which don’t. Unfortunately, this won’t work in Gmail. It does work in Samsung Email (unless you are using a Microsoft email account). All that to say, this isn’t going to fix everything, but where it’s supported, it can help.

Also, in many cases, if an email client supports color-scheme, it likely also supports @media (prefers-color-scheme: dark). That makes the color-scheme less critical, although I have found it particularly useful when icon images get inverted.

Outlook also has a force dark mode; there are a few variations on this one, too, but we’ll look at the main one that is used across the webmail clients, the progressive web app, Mac desktop app, and Android app.

The iOS app gives similar results, but generally a little darker, and the Windows desktop app does its own thing, as it often likes to do.

In terms of how it works, Outlook uses a similar approach, it converts light backgrounds and dark text, but leaves some colors it deems to already be in a dark theme. It also mostly ignores borders unless set on a <td> or <th> element. The overall results have a more muted palette and smoother transitions than Gmail, with fewer abrupt color jumps.

Unlike Gmail, Outlook does update the code, and it stores the original colors in a data attribute. We can use this data attribute to target the dark version with CSS.

The colors are set inline with !important, so we can’t override them directly, we can set colors on elements that haven’t yet been styled. But do bear in mind that these colors will also get converted.

If you are using Design Studio, we now have an emulator for both Google and Outlook force dark mode, built directly inside Design Studio. So you can see the colours update in real time as you change them in your email.

This isn’t a full replacement for testing, the preview will just replicate the color conversion, it doesn’t replicate the email sanitiser. You may still see a difference in the final email. However it should help you massively speed up any color corrections you need to do. You can read more in our documentation.

Forced dark mode can feel unpredictable, especially when email clients make design decisions for you. But once you understand how Gmail and Outlook handle color changes, it becomes much easier to plan for them.

You won't always be able to control the final result, but you can test earlier, spot issues faster, and make smarter design choices. And with forced dark mode previews now built into Design Studio, that process gets a lot easier.