react-email icon indicating copy to clipboard operation
react-email copied to clipboard

Published 20 hours ago • verified publisher icon resendlabs

gmail ios dark mode converts background color

Open shsunmoonlee opened this issue 10 months ago • 0 comments

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 avatar Jan 12 '25 05:01 shsunmoonlee