Add dark mode toggle mail editor

[marcincodes]

Is your feature request related to a problem? Please describe.
Testing dark mode with a toggle hidden somewhere in the dev tools "Rendering" tab (I'm using chrome) is so sad

Describe the solution you'd like
I want to test dark mode and toggle it in the editor instead in the dev tools

Describe alternatives you've considered
Still use dev tools but it's not as handy and easy as toggle in the mailing editor

Additional context
I can help with coding it and send a PR but please tell me if it's a desired feature and point me to how it should look - I don't want to send a PR that won't be merged

[psugihara]

Hey @Perfect7M I like this idea! Thanks for making the issue.

Maybe @monicakogler could mock up a little toggle for the header in the next few days 🙏.

[monicakogler]

so sorry for the delay!! i think a little toggle in the top left corner works nicely. (text-sm text-neutral-200 ml-1.5 hover:underline)

@Perfect7M lmk if you need anything else or see any issues with this solution. thanks!!

[marcincodes]

@monicakogler Thanks for the mockup. @psugihara I will dig into this and make PR probably this week

[marcincodes]

@psugihara I was looking at this issue and here are my findings:

When we have something like this in the email template to change the background in light/dark theme:

@media (prefers-color-scheme: light) {
  body {
    background: white;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}

The easiest way to manipulate it is using the color-scheme CSS property.
Unfortunately is not working well with prefers-color-scheme media query.
According to Can I use only Firefox from version 105 respects color-scheme from the parent in prefers-color-scheme.

This how it looks like to add color-scheme: dark to the iframe:

In Chrome 109

In Firefox 109:

Do you have any idea what we can do about that? Or how to achieve that without setting color-scheme in CSS?

[psugihara]

Dang, yeah I'm not finding a solution either. It seems browser vendors need to catch up here. I would have thought there would be a way to do it for an iframe at least.

It seems like our options are:

1. punt on this feature
2. ship firefox only version
3. require you to write your css in a certain way for the feature to work (e.g. if you use a .dark class or css variables, we could toggle that on and off).

Unless we figure out a workaround, I'd lean towards 1 in interest of simplicity. Thanks for looking into this anyway, definitely a feature I want too.

[marcincodes]

Yeah, it makes sense to postpone for a better future

For anyone who stumbled upon this issue. You can toggle dark mode in chromium based browsers here:

And in Firefox you can toggle it here: