iOS Gmail Dark Mode styling with CSS Blend Modes

[udit99]

Hi there
I'm trying to get around the Gmail dark mode issue where it flips the email colors and found this resource: https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/

Is this something that is known to work with mjml at all? Is there an example of someone doing this successfully with mjml?
Thanks

[udit99]

I just realized its not even doable because mj-wrappers arent infinitely nestable:
#714
😢
Any suggestions for iOS Gmail Dark Mode with MJML?

[aeromax]

DOn't know if this helps, but I struggled with this a lot today and finally made it work. If you're doing the Gmail blend trick, this worked for me.

<mj-text>
 <span class="gmail-blend-screen">
   <span class="gmail-blend-difference" style="mso-color-alt: auto;">
    [insert your text here]
   </span>
 </span>
</mj-text>

[sidhantsuvagiya]

I'm posting my solution here to the fix the iOS Gmail dark mode issue, hoping it might benefit someone in the future. 🙂

Here is the code: https://mjml.io/try-it-live/ZzYM2iN684

<mjml lang="en">
  <mj-head>

    <mj-style inline="true">
      body,
      .body {
      background-color: #161616 !important;
      background-image: linear-gradient(#161616, #161616) !important;
      }

      .mj_section,
      .mj_section > table {
      background-color: #000000 !important;
      background-image: linear-gradient(#000000, #000000) !important;
      }
    </mj-style>

    <mj-style>
      @media (max-width: 480px) {

      .body .gmail-blend-screen {
      background: #000000;
      mix-blend-mode: screen;
      }

      .body .gmail-blend-difference {
      background: #000000;
      mix-blend-mode: difference;
      }

      }
    </mj-style>

    <mj-attributes>
      <mj-all padding="0px" color="#ffffff" font-family="Helvetica, Arial, sans-serif" />
    </mj-attributes>

  </mj-head>


  <mj-body css-class="body" background-color="#161616">

    <mj-wrapper padding="40px">

      <mj-section css-class="mj_section" padding="35px" background-color="#000000">
        <mj-column>
          <mj-text align="center" font-size="24px" line-height="32px" font-weight="700" letter-spacing="0.36px">
            <div class="gmail-blend-screen">
              <div class="gmail-blend-difference">
                Normal Title (h1)
              </div>
            </div>
          </mj-text>
        </mj-column>
      </mj-section>

    </mj-wrapper>

  </mj-body>
</mjml>

[karin-pacholkova]

I applied the code above, everything is fine (text is nearly white, background is dark as wanted), but in iOS Gmail I see the white line above the text (see the screenshot).
Please do you have any advice or fix for this?
Thank you very much in advance!

[sidhantsuvagiya]

@karin-pacholkova I tested it in Litmus but couldn't reproduce this issue. It seems like it might be specific to some iOS Gmail devices. If I remember correctly, replacing the span tag with a div tag might resolve the issue. Could you give that a try and let me know if it works? If it does, I'll update the answer here.

[karin-pacholkova]

@sidhantsuvagiya That was great idea! DIV helped! The line over the text dissapeared.
Thank you very much for your help! 🤩
May I kindly ask you for one more advice?
In iOS Outlook and also iOS Gmail the white color that I have in the mail are slightly changed to:
iOS Outlook - turns white to light yellow

iOS Gmail - turns white to light pink

Don't you know how to persuade these apps to keep the original white text color?
Thank you very much in advance for every your thought and idea!

[karin-pacholkova]

@sidhantsuvagiya I found out that the problem was because I used not black color (dark blue) for background-color in classes. It helped to set black as the background color, then it rendered white text.