Reputation: 3527
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
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
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
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