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?
I’ve had emails from the site sent to me. They render correctly in the gmail app on my Android phone in dark mode. I don’t have an iOS device to test on.
On @ToddZ’s iOS device, he’s getting the same results whether or not the apply custom styles to digest setting is enabled:
My guess is that the iOS gmail app still doesn’t support the prefers-color-scheme media query: Can I email… @media (prefers-color-scheme). That page also says that Android doesn’t support it, but the emails are rendered correctly in gmail on Andriod for me.
Somewhat related, it might be worth noting somewhere that the apply custom styles to digest setting needs to be enabled for the dark mode CSS that’s added to the email template to be applied.
@isaac, I’m not sure if you’re still handling this. It might be worth testing how gmail on iOS is handling this. Especially when the Discourse site’s default theme uses a dark color scheme.
If you have a chance, can you try triggering the same email with the apply custom styles to digest site setting enabled? Does that setting make any difference to how the email is rendered in dark mode on Thunderbird?
Also, can you check again to make sure that the email template found at Admin / Customize / Email Style hasn’t been edited? If it hasn’t been edited, the “Reset to default” button on that page will be disabled:
The Full Color Invert is the most invasive color scheme: It not only inverts the areas with light backgrounds, but impacts dark backgrounds as well.
So if you already designed your emails to have a dark theme, this scheme will ironically force them to become light . Unfortunately, this is currently the tactic used by some of the more popular email clients, such as Gmail app (iOS), Outlook 2021 (Windows), Office 365 (Windows), and Windows Mail.
That post’s example of the issue matches what you’re reporting:
Someone with access to Discourse’s Litmus account will need to test this. To reproduce the issue, try sending a digest email to Litmus from a Discourse site that has its default theme’s color pallet set to a Dark color scheme.
Assuming that triggers the issue, the easy fix would be to always use a Light color scheme for emails, regardless of the color palette that’s been assigned to the default theme on Discourse. There’s also an approach suggested in the “Gmail iOS & Outlook Windows-specific targeting” section of the post I linked to that could potentially work. It’s a bit of a hack though.
Whoever ends up looking into this might also look at the way the apply custom styles to digest site setting currently needs to be enabled to add dark mode support for email clients that actually do support dark mode. There’s nothing in the Discourse UI that makes it obvious that this setting is related to dark mode support.
Wow, yes, Full Color Invert does appear to be what I’m seeing, at least with the digest/summary in iOS Gmail.
I lack the bandwidth right now to parse that whole article and figure out appropriate workarounds, but I’ll have to try something eventually. The github thread for posting Gmail examples has been open since 2019, and a number of workarounds proposed, but there’s no indication of the underlying behavior being changed.
I hope the Discourse team is able to make some general tweaks to unify appearance across platforms.
Based off the digest email I’ve seen from your site, I’m assuming your site has a dark default color scheme. For that case, you can fix the issue that’s happening with the header background color with the iOS Gmail app by adding the following code to your site’s Admin / Customize / Email Style / CSS tab:
Note that the colors added to the linear-gradient should both be the same. They should match the value that’s set for your default theme’s color palette’s “header background” color:
