Is there a way to style darkmode emails? #591
Replies: 3 comments 1 reply
-
|
I am doing it like this
|
Beta Was this translation helpful? Give feedback.
-
|
Hello, you could do it? Can you show us how. |
Beta Was this translation helpful? Give feedback.
-
|
Al final no lo tuve que hacer. Acá me respondieron una solución que no pude probar. También, por si te sirve, había encontrado esta librería que parecería soportarlo por lo que leí (art.) |
Beta Was this translation helpful? Give feedback.
-
|
You can use Tailwind CSS utility classes the way you might elsewhere, provided that you wrap the necessary components with the Tailwind component from import { Body, Head, Html, Section, Tailwind, Text } from '@react-email/components'
import { render } from '@react-email/render'
const ExampleEmail: FC = () => {
return (
<Tailwind>
<Html>
<Head>
<style>{':root {color-scheme: light dark;}'}</style> // Required for dark mode to work in Apple Mail on macOS.
</Head>
<Body className='p-4'>
<Section className='bg-white dark:bg-black text-black dark:text-white'>
<Text>Just an example email.</Text>
</Section>
</Body>
</Html>
</Tailwind>
)
}
const html = await render(<ExampleEmail />)
console.log({ html })
const text = await render(<ExampleEmail />, { plainText: true })
console.log({ text }) |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I need to style the emails to render appropriate styles in light and dark mode. The
<Tailwind />component doesn't seems to supportdark:Beta Was this translation helpful? Give feedback.
All reactions