'Issues with Outlook dark mode and email CSS

I'm working on some email templates and seem to be having an issue with how Outlooks dark mode is impacting the colours, specifically on the desktop client

Light Mode

However when flipping to dark mode it changes the colour to a sky blueish colour, anyone know how to mitigate this?

enter image description here

I used <meta name="color-scheme" content="only"> which solved the same issue in Apple mail on iOS

htmlcssoutlookdarkmode


Solution 1:[1]

The meta element is not supported by the Word editor. Outlook uses Word as a rendering engine. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

Solution 2:[2]

I also had same problem in our company. We designed everything on the normal (light) mode but when email was viewed with the dark mode on, it was making our email look disgusting.

The solution we got to this problem was by adding a image ( i.e. logo
of our company in the email footer).

This fixed the dark mode issue and the email began to look same on both modes as like we designed. This is a simple hack and hope that other people will also get benefited from this.

Like me, you can add any image in the email and it seems that dark mode ignores the email.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eugene Astafiev
Solution 2 Bimal Subedi

Related Questions