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>
);
}
电子邮件在发送前应转换为 html。请参阅他们的集成部分。
所以基本上你可以将 css
prefers-color-scheme
与 css 一起使用。
或者,如果您想使用 javascript,您可以使用 window.matchMedia
函数。
另请参阅 https://sreetamdas.com/blog/the-perfect-dark-mode 有关 React 的示例。