CODEWITHSUNDEEP
csshtml-emailios-darkmodedarkmodeandroid-dark-theme
Anitha
Anitha

Reputation: 21

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

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.

Upvotes: 2

Views: 5418

Answers (2)

Prajval Singh
Prajval Singh

Reputation: 1141

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/

Upvotes: 4

Bhargav Panchal
Bhargav Panchal

Reputation: 1

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;}
}

Upvotes: 0

Related Questions