Controlling color swaps in Gmail in dark mode

Question

I am having issues with Gmail in dark mode on mobile clients, namely the color choices it uses.

If I specify green background-color: #00ff00; as a background color, Gmail in dark mode changes the value to a dark green background-color: #1c4211;. It's not my first choice for a dark green. I am looking for ways to customize the color.

I have tried to target Gmail specifically with a class like: u ~ div td background-color: #00ff00;. With some color choices like red, it adheres to the color choice. In many others, it makes a substitution for a darker color that doesn't work for my intended needs.

Has anyone run across a solution to fine-tune the swap process?

Sixpence

There is none for Gmail atm but you can find CSS on how to target other email clients here: litmus.com/blog/… – Nihilism

Thank you, @Syfer. Apple/IOS isn't a problem and Outlook currently will inline color values with !importantwhich makes it impossible to override. My current plan is to get a job with the gmail team, secretly add an exploit. Wish me luck. – Sixpence

Answer 1

For gmail app on iphone I've found that hsl colors with multiple gradients do the trick, like so:

background: #10c893;
background: -moz-linear-gradient(top,  hsl(163,85%,42%) 0%, hsl(163,85%,42%) 100%);
background: -webkit-linear-gradient(top,  hsl(163,85%,42%) 0%,hsl(163,85%,42%) 100%);
background: linear-gradient(to bottom,  hsl(163,85%,42%) 0%,hsl(163,85%,42%) 100%);

Vindicate

I was stuck for 1 week already and you are a GOD SEND. in my case I use mjml and use the <mj-style inline="inline"> to appy this to any div that I do not want to invert at dark mode. cheers. I hate this email template thingy – Musset

Answer 2

Messing with the answer from @Iggy, I found that hsl colors aren't necessary, and with linear-gradient now widely supported, we can specify the background color more simply like this:

background: #fff;
background: linear-gradient(#fff, #fff);

I tested this in both Android and iOS Gmail apps on litmus.com.

Eighth

Answer 3

An alternative solution we used was to create a 1px gif and use it as the background image for the containers we wanted to force to be a certain color.

<td style="background-image: url('https://path-to-image-here/pixel-ffffff.gif'); background-repeat:repeat;">
                    <div>
                        THIS HAS A WHITE BACKGROUND IN DARK MODE NOW!
                    </div>
                </td>

Only thing we haven't figured out yet is how to force the font colors not to invert. Thinking we will alter our design a bit and use grays instead of black with the hope gmail won't invert it.

Sommer