gmail ios dark mode converts background color #1863

shsunmoonlee · 2025-01-12T05:25:25Z

Describe the Bug

gmail ios dark mode converts background color.
How should one apply blend mode using Tailwind?

      <Head>
        <meta name="color-scheme" content="dark" />
        <style>
          {`
            u + .body .gmail-blend-screen {
              background: #121212;
              mix-blend-mode: screen;
            }

            u + .body .gmail-blend-difference {
              background: #121212;
              mix-blend-mode: difference;
            }

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

            body {
              background-color: #121212;
              color: #faf8f5e6;
              font-size: 14px;
              font-family: Inter, sans-serif;
            }
          `}
        </style>
      </Head>
      <Preview>{previewText}</Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
            },
          },
        }}
      >
        <Body>
          <Container className="gmail-blend-screen">
            <Container className="gmail-blend-difference">
               <Container> 
                 ...

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

this issue

To Reproduce

      <Head>
        <meta name="color-scheme" content="dark" />
        <style>
          {`
            u + .body .gmail-blend-screen {
              background: #121212;
              mix-blend-mode: screen;
            }

            u + .body .gmail-blend-difference {
              background: #121212;
              mix-blend-mode: difference;
            }

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

            body {
              background-color: #121212;
              color: #faf8f5e6;
              font-size: 14px;
              font-family: Inter, sans-serif;
            }
          `}
        </style>
      </Head>
      <Preview>{previewText}</Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
            },
          },
        }}
      >
        <Body>
          <Container className="gmail-blend-screen">
            <Container className="gmail-blend-difference">
               <Container> 
                 ...

check gmail ios on darkmode

Expected Behavior

original dark backgrouund.

What's your node version? (if relevant)

lts

rjumatov · 2025-03-13T19:36:15Z

Your setup looks almost like mine and I've been following the steps in this blog post.
But I noticed that in your <Body> component, you’re missing the "body" class, which is needed to make your .body selector apply.

Try updating this:

<Body>

To this:

<Body className="body">

This ensures that your CSS selectors like .body .gmail-blend-screen and .body .gmail-blend-difference actually apply inside Gmail’s rendering engine.

However, I’m running into another issue: colored elements inside the body (like <Img/> and <Link/>) are being inverted in Gmail iOS dark mode. For instance blue links turning orange.

shsunmoonlee added the Type: Bug Confirmed bug label Jan 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

gmail ios dark mode converts background color #1863

gmail ios dark mode converts background color #1863

shsunmoonlee commented Jan 12, 2025

rjumatov commented Mar 13, 2025 •

edited

Loading

gmail ios dark mode converts background color #1863

gmail ios dark mode converts background color #1863

Comments

shsunmoonlee commented Jan 12, 2025

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

rjumatov commented Mar 13, 2025 • edited Loading

rjumatov commented Mar 13, 2025 •

edited

Loading