CODEWITHSUNDEEP
htmlcssemailhtml-emailmailchimp
Web User
Web User

Reputation: 21

Email Rendering in Dark Mode

I am having an issue in the rendering of my custom coded HTML Email template in Dark Mode. The email and all the colors work perfectly fine except this one top header. I'm unable to figure out why the green color becomes darker when viewing the email in Dark Mode.

Please see the attached image for what it looks like in Dark Mode:

Dark Mode Issue

Instead, it should render the green color like:

Light Mode

Can anyone please help me fixing this green header issue.

Thanks!

Upvotes: 2

Views: 6550

Answers (4)

Martin Zvarík
Martin Zvarík

Reputation: 2469

Because they invert the colors in dark mode.

Solution in your case is putting plain background image, which is usually not inverted, but you need to test for each client.

Upvotes: 0

Samantha Ward
Samantha Ward

Reputation: 3

Without seeing your code, it's hard to know exactly what the issue is.

As others have mentioned, if the image is transparent and you're relying on a background color, that would be a cause for this change. Some ESPs (email service providers) invert background and text colors — bright colors, like that green, become darker. Some ESPs also make darker colors brighter in dark mode. Some ESPs allow you to set specific dark mode background and text colors using a media query, but not all support that.

Litmus has a great dark mode guide that breaks down how dark mode works in different ESPs and how to best optimize your emails.

Your best bet would be to make that green section an image just like the second one.

Upvotes: 0

gwally
gwally

Reputation: 3527

As of today, we cannot influence the colors or behavior with Outlook or Gmail clients that support Dark Mode through HTML or CSS. Gmail replaces color values in the <style> sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override.

On Apple / IOS clients, you can use:

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

Until Gmail and Outlook offer a solution, you're stuck with Gmail creating obverse colors and Outlook changing everything to a fairly standard group of colors (mostly #333333).

Good luck.

Upvotes: 1

Krishna Noutiyal
Krishna Noutiyal

Reputation: 98

use

filter: invert(1) hue-rotate(180deg)

to invert the color of the web-page and where u don't want to invert the color type

filter: invert(1) hue-rotate(180deg)

again to invent the color as it was before

Upvotes: -1

Related Questions