CODEWITHSUNDEEP
htmlcssiphoneemailios-darkmode
Deep Gandhi
Deep Gandhi

Reputation: 395

iOS gmail app is overriding CSS in dark mode

as per this question Link we are facing same issue,

I have an HTML email that I'm sending from a nodejs app, but when the email is viewed on Gmail on iOS, all the elements that had background-color or color property they get reversed.

expected output:

enter image description here

Gmail from iOS Light mode: enter image description here

Gmail from iOS Dark mode: enter image description here

as you can see in Dark mode color got changed in iOS Gmail app.

we've already tried solution from this answer Link

attaching code snippet here:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="only light">
  <title>Fixing Gmail's Dark Mode Issues with CSS Blend Modes</title>
  <style>
    u+.body .gmail-blend-screen {
      background: #000000;
      mix-blend-mode: screen;
      color: #ffffff !important;
    }
    
    u+.body .gmail-blend-difference {
      background: #000000;
      mix-blend-mode: difference;
      color: #ffffff !important;
    }
    
    .text-white {
      color: #ffffff !important;
    }
    /* Prevent the button from being affected by dark mode inversion */
    
    .button-no-inversion {
      background-color: #9B3E3E !important;
      /* Custom color */
      color: #ffffff !important;
      /* Ensure text color remains white */
      border: 2px solid #000000;
      /* Border styling */
      border-radius: 24px;
      /* Rounded corners */
      padding: 12px 18px;
      /* Padding */
      font-size: 16px;
      /* Font size */
      font-weight: bold;
      /* Font weight */
      text-decoration: none;
      /* Remove text underline */
      mix-blend-mode: normal;
      /* Prevent inversion */
      display: inline-block;
      /* Ensure block layout */
    }
  </style>
</head>

<body class="body">
  <div style="background: #000000; color: white !important; background-image: linear-gradient(#000000, #000000);">
    <div class="gmail-blend-screen">
      <div class="gmail-blend-difference">
        <p class="text-white">This text should stay white in both modes.</p>
        <br><br>

        <button class="button-no-inversion">
                    Button
                </button>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 68

Answers (0)

Related Questions