如何在React电子邮件模板中根据用户的设备主题(浅色/深色)动态更改电子邮件徽标?

问题描述 投票:0回答:1

Stack Overflow 社区您好,

我正在开发一个反应电子邮件模板,并面临着根据用户的设备主题(浅色或深色模式)动态更改徽标的挑战。我有两个版本的徽标:一个针对浅色模式进行了优化 (

logoBlancoUrl
),另一种针对深色模式进行了优化 (
logoNegroUrl
)。这是我的代码片段:

import {
  Body,
  Button,
  Container,
  Head,
  Hr,
  Html,
  Img,
  Preview,
  Section,
  Text,
} from "@react-email/components";
import * as React from "react";

export function BienvenidaEmailTemplate({ nombre, apellido, token }) {
  const enlaceConfirmacion = `${process.env.APP_URL}/confirm-email?token=${token}`;
  const logoBlancoUrl = `/logo-blanco.png`;
  const logoNegroUrl = `/logo-negro.png`;
  return (
    <Html>
      <Head />
      <Preview>
        Janochat - Bienvenido/a {nombre} {apellido}
      </Preview>
      <Body style={main}>
        <Container style={container}>
          <Img
            src={logoNegroUrl}
            width="70%"
            alt="Janochat"
            style={logo}
          />
        </Container>
      </Body>
    </Html>
  );
}
reactjs nodemailer
1个回答
0
投票

电子邮件在发送前应转换为 html。请参阅他们的集成部分。

所以基本上你可以将 css

prefers-color-scheme
与 css 一起使用。 或者,如果您想使用 javascript,您可以使用
window.matchMedia
函数。

另请参阅 https://sreetamdas.com/blog/the-perfect-dark-mode 有关 React 的示例。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.