如何在React Email模板中根据设备亮/暗模式动态切换Logo

要实现根据用户设备亮/暗模式动态切换Logo，核心是利用CSS的prefers-color-scheme媒体查询——这是主流邮件客户端普遍支持的特性。以下是修改后的代码实现：

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}`;
  // 建议使用绝对URL，避免邮件客户端无法解析相对路径
  const logoBlancoUrl = `${process.env.APP_URL}/logo-blanco.png`;
  const logoNegroUrl = `${process.env.APP_URL}/logo-negro.png`;

  return (
    <Html>
      <Head>
        <style>
          {`
            .logo-light { display: block; }
            .logo-dark { display: none; }
            /* 检测系统暗模式 */
            @media (prefers-color-scheme: dark) {
              .logo-light { display: none; }
              .logo-dark { display: block; }
            }
          `}
        </style>
      </Head>
      <Preview>
        Janochat - Bienvenido/a {nombre} {apellido}
      </Preview>
      <Body style={main}>
        <Container style={container}>
          {/* 亮模式Logo：默认显示 */}
          <Img
            src={logoNegroUrl}
            width="70%"
            alt="Janochat"
            style={logo}
            className="logo-light"
          />
          {/* 暗模式Logo：默认隐藏，暗模式下显示 */}
          <Img
            src={logoBlancoUrl}
            width="70%"
            alt="Janochat"
            style={{ ...logo, display: 'none' }}
            className="logo-dark"
          />
        </Container>
      </Body>
    </Html>
  );
}

// 示例基础样式（可根据需求调整）
const main = {
  backgroundColor: '#ffffff',
  fontFamily: 'Arial, sans-serif',
};

const container = {
  maxWidth: '600px',
  margin: '0 auto',
  padding: '20px',
};

const logo = {
  margin: '0 auto 20px',
  display: 'block',
};

关键说明 #

• 媒体查询逻辑：默认展示亮模式Logo，当系统切换到暗模式时，通过CSS隐藏亮模式Logo并显示暗模式版本
• 路径建议：使用绝对URL加载Logo，避免邮件客户端无法解析相对路径导致图片加载失败
• 降级处理：给暗模式Logo设置内联display: none，确保不支持prefers-color-scheme的旧版客户端仅显示亮模式Logo

内容的提问来源于stack exchange，提问作者PugProvoleta