Sendgrid Dark Mode compatibility with two logos

user_4717331 0
Viewed 1422

I'm working with Sendgrid, but it has conflicts with the logo in dark mode, my logo is black and I don't want to add a white border to the letters. I have two logos, one black and one white. I need to detect on all devices when it is in dark mode and when it is not.

On my head html I have:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

In the css styles I have this:

    .dark-block { display: none; }
    .dark-logo { display: none; }
    @media (prefers-color-scheme: dark ) {
      .dark-logo { display:inline !important; line-height: auto !important; }
      .light-logo { display:none; display:none !important; }
      .light-block { display:none; }
      .dark-block { display:block; }
      
      body, p, a, td {
          color: #FFFFFF !important;
      }
    }

Then in my html I have the two logos with the class dark-logo / light-log. but on iPhone it doesn't work, I have tried Outlook dark mode in Chrome and it works perfectly, on Android Outlook it doesn't work.

I need help to know how to correctly identify if the theme is in dark or light mode.

I appreciate the help. Thank you!

sendgrid css html
1 Answers

The only way I found compatibility for all devices is to do the logo recommendation by sendgrid enter image description here

Adding a white border when @media (prefers-color-scheme: dark ) doesn't work.

user_47173310
Related