Change background colour for html emails in dark mode on mobile phoner

Question

I am trying to get the HTML email to have normal white background even when a mobile dark mode is turned on, I have added the below meta and media queries

    meta name="color-scheme" content="light dark" 
    meta name="supported-color-schemes" content="light dark"
    
  @media (prefers-color-scheme: light dark) {
       body {
       background: #ffffff !important;
       color: #ffffff !important;
       }
       h1,h2,h3,h4,p{
        color:#ffffff;
       }
       }

But when I turn the dark mode on in my mobile the background is overwritten to black and font colour to white, please help.

Answer 1

I had a similar challenge and what really helped was using background-image: linear-gradient(colorOfChoice,colorOfChoice) that creates almost similar looking color that can be used for the background. At least for the background color this works perfectly.

How the dark mode works is that, there are two types of dark mode implementations, one is where there is partial inversion, and then there is full inversion, in full inversion all the colors are inverted, as in even the dark color will be inverted to white while in the partial inversion, only the white would be converted into dark. This happens by actually changing your css code when its rendered inside the mail application.

But if you use linear-gradients, such conversion doesn't happen and your email is rendered how you want it to be rendered.

Also note, prefers-color-scheme:dark as of now is not supported in gmail clients as per https://www.caniemail.com/

Answer 2

You can try this code and when you want to do color of text white, give 'aba_white'

@media screen and (prefers-color-scheme:dark) {
    .aba_white { color: #FFFFFF!important; }
    .aba_wrap { background-color: #000000 !important;}
}