gwally
gwally

Reputation: 3527

Controlling color swaps in Gmail in dark mode

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?

Upvotes: 6

Views: 7692

Answers (3)

apostl3pol
apostl3pol

Reputation: 984

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.

Upvotes: 3

knutter539
knutter539

Reputation: 74

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.

Upvotes: -1

Iggy
Iggy

Reputation: 2121

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%);

Upvotes: 8

Related Questions