Digest email: logo color/background conflict (light/dark mode)

ToddZ · September 19, 2023, 7:28am

I’m using the default theme with no theme components or CSS customization. In Settings, I’ve specified my white “dark mode” logo for the digest email, because the logo background area of the digest is dark. Looks great – usually:

However, when I receive a digest (in Gmail app) on an iPhone in device dark mode, the logo background area is reversed to white(-ish), making the logo nearly invisible:

On desktop, I can preview dark mode using the Chrome inspector. It does not reverse the logo background color to white. But it does swap in my default (“light mode”) logo, making it nearly invisible there:

This has me pretty confused… I don’t know if I’m seeing a bug, or if I have the wrong expectation about how mobile dark mode works…

I imagine I could add a black stroke around my default logo so it would work better on a light background.
But I’d welcome any hints for properly achieving digest logo+background combos that work in all settings.

simon · September 19, 2023, 6:14pm

Just to confirm, have you made any changes to the Discourse HTML email template that’s found at Admin / Customize / Email Style? Also, have you added any CSS to the CSS tab that is found on that page?

Also, is the apply custom styles to digest site setting enabled on your site? That setting is enabled by default.

Assuming that any customizations you have made are not causing the issue, my guess is that what’s happening is that the %{dark_mode_styles} placeholder that’s in the default Discourse email template is being replaced with the CSS that’s added by this method:

github.com

discourse/discourse/blob/main/app/helpers/email_helper.rb#L50


      
          
          protected
          
          def dark_mode_meta_tags
            "
            <meta name='color-scheme' content='light dark' />
            <meta name='supported-color-schemes' content='light dark' />
            "
          end
          
          def dark_mode_styles
            "
            <style>
              @media (prefers-color-scheme: dark) {
                html {
                  background: #151515 !important;
                }
          
                h1,
                h2,
                h3,

That method adds the following CSS to the template:

[dm='header'] {
  background: #151515 !important;
}

That CSS is intended to cause the digest header to be dark when the email is viewed in a device that’s set to dark mode, but maybe some devices are ignoring the !important directive and displaying the inverse of the color.

I can’t reproduce the issue on my Android phone. I don’t have an iPhone to test it on. Maybe someone else can try viewing a summary email in dark mode on an iPhone?

ToddZ · September 19, 2023, 9:32pm

Hi Simon – thanks for the response.

I have not touched the email template custom HTML or CSS. I did disable apply custom styles to digest but as expected that had no effect.

I’m happy to send a summary email if anyone wants to post or DM me an address…