Email Template Dark mode Support?

[RandomPerson]

Do auth0 email templates support light mode and dark mode features ?

[marcelina.barycka]

Hi there @RandomPerson ,

Unfortunately, there is no “toggle-button” option that you could apply to all email templates.

However, you can experiment with the HTML code corresponding to the email template.
To see changes applied, in case you have not yet your Custom Email Provider set, just copy the code from the Message area, save it as an HTML file, and open it in a browser to see changes immediately.

Please let me know if you have more questions on that.

[RandomPerson]

I tried using these CSS media query to check for browser scheme in the style tag of email template but it does not work.

[marcelina.barycka]

Hi @RandomPerson ,

Based on my tests, the prefers-color-scheme media feature influences styling based on the Operating System Appearance preferences (light / dark / auto).

You can quickly verify it by adding the following piece of CSS to the style tag:

@media (prefers-color-scheme: light) {.main {color: #57974c;}}@media (prefers-color-scheme: dark) {.main {color: #dc87cf;}}

When selecting a Light mode on the OS settings, we got the <div class="main"> in green; when we select the dark mode, we got it in pink.
Changing the color scheme on a browser level doesn’t influence it.