Can't disable or toggle the dark theme

[brentlintner]

Hi!

Awesome project.

I noticed the latest release added support for rendering as a dark theme.

However it assumes if you have an OS level dark theme enabled you want to render a dark theme.

I might try to add a config option to the UI when I get a chance, but FWIW I don't think you should have to toggle your OS UI in order to test what is normally the default light theme people will see more regularly?

Workaround: Use 2.0.0 for the time being.

Thanks!

[hsearcy]

Seconding this, I don't want to render emails in dark mode, but I also don't want to toggle my OS settings just to test emails.

[stevenharman]

This is a good point. The current "theming" uses a rather brute-force approach where we filter the colors of the entire container. I gave myself a few minutes to try adding a new

LetterOpenerWeb.config.ui_mode

which defaults to :auto, but can be set to :light or :dark. But I couldn't find an elegant way to make both auto and dark work, short of copy/pasta.

Ideally we'd do something like upgrade to Bootstrap 5.3+, and leverage its built-in theming and prefers-color-scheme support. With that in place, we could easily add a configuration option to force light or dark, while defaulting to auto. I don't have time to take that on at the moment, but if anyone is up for giving it a go, I'd be happy to review it!

[carolyn-idi]

Checking if there is a solution to the dark mode. It's changing the colors in my email when rendered in LetterOpenerWeb, and can't get an approval because my manager says the colors are wrong; which is not true. The colors only change when rendered with LetterOpenerWeb. The white background and text are showing as black and my black text is showing as white.

Is there a way to fix this or prevent it from happening? I tried adding LetterOpenerWeb.config.ui_mode :light with no success.

Any advice or an alternative gem would be highly appreciated.

[hsearcy]

@carolyn-idi I did what @brentlintner did in the original post: downgrade to version 2.0.0 of this gem

[carolyn-idi]

@brentlintner - Thanks!

[navidemad]

@carolyn-idi @hsearcy @stevenharman @brentlintner I found a temporary hack solution by adding the related file causing that background-color scheme body change:

mkdir -p app/views/layouts/letter_opener_web/styles
touch app/views/layouts/letter_opener_web/styles/_letters.html.erb

Then in that file set:

<style>
  <%= render file: LetterOpenerWeb::Engine.root.join("app/views/layouts/letter_opener_web/styles/_letters.html.erb") %>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: initial !important; /* Override the gem's background color */
    }
  }
</style>