How can I remove Gmail App Dark Mode stylings? - css

Question

I'm building out an email using mjml and the design is pretty standard and not flexible to change.
In gmail the copy becomes illegible because gmail inverts the white copy to black copy.
I want gmail to keep my intended stylings, is there a method to ensuring gmail doesn't invert anything?
I've tried:
Applying !important to all the elements I require.
#media (prefers-color-scheme: dark) {} but gmail strips media queries.
<meta name="supported-color-schemes" content="light only"> no luck.
Any help would be much appreciated.
Thank you
Moe

Answer 1

You can do this hack:
<style type="text/css">
:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}
</style>
and include dark mode media query in your CSS:
#media (prefers-color-scheme: dark ) {
.body {
background-color: #CCCCCC !important;
}
h1, h2, h3, td {
color: #9ea1f9 !important;
padding: 0px 0px 0px 0px !important;
}
}
That being said, this will only work sometimes. To style against dark mode the best you can do is style your email in a way that won't be affected when dark mode is active.
Until there is a definitive solution (there is nothing for the time being), you either have to accept the idea that dark mode will stay active, or do what you can to style against it.
Here is a resource with more info. The world of email is still not caught up with the browser, many styles are still ignored by different clients and most solutions are experimental at best.