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

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

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)