Search code examples
htmlcssemailoutlookhtml-email

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?

Solution

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