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.
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:
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?