How to Dynamically Change Email Logo Based on User's Device Theme (Light/Dark) in React Email Template? #1277

JuanSpada · 2024-02-02T14:30:36Z

JuanSpada
Feb 2, 2024

Hello,

I am working on a react-email template and facing a challenge with dynamically changing the logo according to the user's device theme (light or dark mode). I have two versions of the logo: one optimized for light mode (logoBlancoUrl) and another for dark mode (logoNegroUrl). Here's a snippet of my code:

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>
  );
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to Dynamically Change Email Logo Based on User's Device Theme (Light/Dark) in React Email Template? #1277

{{title}}

Replies: 0 comments

Select a reply

How to Dynamically Change Email Logo Based on User's Device Theme (Light/Dark) in React Email Template? #1277

JuanSpada Feb 2, 2024

Replies: 0 comments

JuanSpada
Feb 2, 2024