CODEWITHSUNDEEP
htmlcssemailoutlookhtml-email
AGrush
AGrush

Reputation: 1167

Override outlook dark mode in html emails

The problem is when dark mode is switched on the effect is killing the look of the email and I'm at wits end on how to dark mode proof our templates.

e.g. I have an element in one of my html email tables <span style="rgb(16, 0, 0)";>Green Tea</span>

On the web version of Outlook the dark mode switch when flipped to my understanding does this:

  1. It looks for the color of each element using JS and flips it's color, so it adds style="color: rgb(255, 250, 250) !important;"

  2. It removes the old inline style for the color.

  3. Inserts data-ogsc="rgb(16, 0, 0)" in its place to save the original color.

How can I stop Outlook from overriding this element in dark mode? I want to keep the original color. I'm using Emarsys to send emails. Anyone have any experience with this at all?

Upvotes: 2

Views: 7220

Answers (2)

RAMIREZ
RAMIREZ

Reputation: 198

For me what worked was adding color-scheme meta-tags:

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

Whit this Outlook respected both my text and background colors.

You can even use @media (prefers-color-scheme: dark) to control Dark Mode styles.

(Tested on Outlook for iOS)

Source: Campaign Monitor

EDIT: it doesn't always work. I got it to work for white text over a dark greenish background, but black text over white background still gets inverted.

Upvotes: 2

HTeuMeuLeu
HTeuMeuLeu

Reputation: 2811

Your understanding of how Outlook.com’s dark mode works seems correct. The only subtle nuance is that it doesn't "flip" the colors, it changes them to make sure the text has 4.5:1 contrast ratio against the webmail’s dark background color. You can see the actual script used by Outlook.com here. (Look for the isValidContrast() and fixContrast() functions.)

While there are a few tricks to maintain background colors (like using a plain background image for example), there is no way to maintain text colors as far as I know. Maybe if you give a bit more context as to what you're trying to achieve exactly, we can help finding an alternate solution.

Upvotes: 0

Related Questions