Emailed Forum Posts grayed out in Dark Mode on some Discourse forums

Recently the text on emailed posts I receive has been greyed out.

This happens with meta.discourse.org and some other Discourse forums, but some other Discourse forums work fine.

The problem happens only when my Mac is set to dark mode; it does not happen with light mode.

Did something change recently in the Discourse software to cause this?

5 Likes

Hi Richard,

I have tried to repro this using Apple Mail and on 3 different browsers with gmail, but so far I havenā€™t been successful. So Iā€™d like to get some more information to see if we can replicate this. Can you tell me:

  • What email client you use?
  • If gmail, what browser do you use?
  • And what version of macOS are you on?

Weā€™ll keep digging into this but hopefully this will help us narrow it down.

Mark

4 Likes

Iā€™m not Richard, but judging by the font in the image, he appears to be using Microsoft Outlook. :grin:

3 Likes

Since upgrading to 2.9.0.beta4, one member of our forum has reported that they are experiencing a similar issue with emails sent from the forum. Their PC is set to Dark mode, they are using Microsoft Outlook on Windows 10.

They forwarded one of the emails to their IT manager and the light grey text was black on the IT managerā€™s device.

The setting ā€˜default dark mode color scheme idā€™ in the forum is set to None. There is only one active theme: Default, the color palette is Light (default), no Custom CSS/HTML.

4 Likes

Weā€™ve been getting something similar too.

Any suggestions on how we car narrow down what is causing the problem?

We had a user report that the text in their email notification was super light colored, so much so that itā€™s difficult to read:

The behavior seems to only be occurring in Outlook Web App. Has anyone else run into this one? Iā€™m wondering if itā€™s being caused by Discourse or the Outlook app and if thereā€™s anything we can do to resolve.

Hello and welcome @Anna_at_Skuid :slightly_smiling_face:

Iā€™ve slipped your post into this existing #bug topic on the same issue to keep them grouped together. :+1:

3 Likes

I can replicate the issue using Web Outlook App on Microsoft Edge (Version 106.0.1370.47 (Official build) (64-bit)), Firefox 106.0.1 (64-bit) and Chrome (Version 106.0.5249.119 (Official Build) (64-bit)) on Windows 10 Enterprise, version 20H2.

Windows 10 Settings > Personalisation > Colours >
Then either:
Choose your colour: Custom.
Choose your default app mode: Dark.
or:
Choose your colour: Dark.

Outlook Web App > Settings > Dark mode: Off.

Seems to be the color properties in this CSS style taken from a new version email (as an example) below?:

<div class="rps_735d"><div dir="ltr" style="line-height:1.4; text-align:left"><p>Hooray, a new version of <a href="https://www.discourse.org" target="_blank" rel="noopener nofollow ugc noreferrer" data-auth="NotApplicable" style="text-decoration:none; font-weight:bold; color:#006699" data-safelink="true" data-linkindex="0"><span data-markjs="true" class="mark95gsb08l7" style="background-color: rgb(255, 241, 0); color: black;" data-ogac="" data-ogab="" data-ogsc="" data-ogsb="">Discourse</span></a> is available!</p><p>Your version: 2.9.0.beta9<br aria-hidden="true">New version: <strong>2.9.0.beta10</strong></p><ul style="margin:0 0 0 10px; padding:0 0 0 20px"><li style="padding-bottom:10px"><p>Upgrade using our easy <strong><a href="https://forum.step.org/admin/upgrade" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" style="text-decoration:none; font-weight:bold; color:#006699" data-safelink="true" data-linkindex="1">one-click browser upgrade</a></strong></p></li><li style="padding-bottom:10px"><p>See whatā€™s new in the <a href="https://meta.discourse.org/tag/release-notes" target="_blank" rel="noopener nofollow ugc noreferrer" data-auth="NotApplicable" style="text-decoration:none; font-weight:bold; color:#006699" data-safelink="true" data-linkindex="2">release notes</a> or view the <a href="https://github.com/discourse/discourse/commits/main" target="_blank" rel="noopener nofollow ugc noreferrer" data-auth="NotApplicable" style="text-decoration:none; font-weight:bold; color:#006699" data-safelink="true" data-linkindex="3">raw GitHub changelog</a></p></li><li style="padding-bottom:10px"><p>Visit <a href="https://meta.discourse.org" target="_blank" rel="noopener nofollow ugc noreferrer" data-auth="NotApplicable" style="text-decoration:none; font-weight:bold; color:#006699" data-safelink="true" data-linkindex="4">meta.<span data-markjs="true" class="mark95gsb08l7" style="background-color: rgb(255, 241, 0); color: black;" data-ogac="" data-ogab="" data-ogsc="" data-ogsb="">discourse</span>.org</a> for news, discussion, and support for <span data-markjs="true" class="mark95gsb08l7" style="background-color: rgb(255, 241, 0); color: black;" data-ogac="" data-ogab="" data-ogsc="" data-ogsb="">Discourse</span></p></li></ul><h3 style="margin:30px 0 10px"><a href="#x_release-notes-1" name="x_release-notes-1" style="text-decoration:none; font-weight:bold; color:#006699" data-safelink="true" data-linkindex="5"></a>Release notes</h3><p>Read about the release here:</p><p><a href="https://meta.discourse.org/t/2-9-0-beta10-sidebar-new-notification-menu-security-fixes-and-more/239858" target="_blank" rel="noopener nofollow ugc noreferrer" data-auth="NotApplicable" style="text-decoration:none; font-weight:bold; color:#006699" data-safelink="true" data-linkindex="6">https://meta.<span data-markjs="true" class="mark95gsb08l7" style="background-color: rgb(255, 241, 0); color: black;" data-ogac="" data-ogab="" data-ogsc="" data-ogsb="">discourse</span>.org/t/2-9-0-beta10-sidebar-new-notification-menu-security-fixes-and-more/239858</a></p><p>This release includes security fixes, so please update as soon as possible.</p><div style="display:none; white-space:nowrap; font:15px courier; line-height:0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div><style>
<!--
@media (prefers-color-scheme: dark) {
.rps_735d html
	{background:#151515!important}
.rps_735d h1, .rps_735d h2, .rps_735d h3, .rps_735d h4, .rps_735d h5, .rps_735d h6, .rps_735d p, .rps_735d span, .rps_735d td
	{color:#dddddd!important}
.rps_735d [data-stripped-secure-media]
	{border-color:#454545!important}
.rps_735d [dm='text-color']
	{color:#dddddd}
.rps_735d [dm='header']
	{background:#151515!important}
.rps_735d [dm='topic-body']
	{background:#151515!important;
	border-bottom:1px solid #454545!important}
.rps_735d [dm='triangle']
	{border-top-color:#151515!important}
.rps_735d [dm='body']
	{background:#222222!important;
	color:#dddddd!important}
.rps_735d [dm='body_primary']
	{background:#062e3d!important;
	color:#dddddd!important}
.rps_735d [dm='bg']
	{background:#323232!important;
	border-color:#454545!important}

	}
-->
</style></div></div>

A workaround in the meantime would be to suggest to the user that they could turn dark mode on in Outlook Web App Settingsā€¦?

Hi folks,

Apologies for the delay here, we have reproduced the issue in one specific scenario and merged a fix. If you are a hosted customer, the fix will be in your instance over the next week or so.


The specific scenario for the repro is using the default Outlook Web app running on an OS set to dark mode.

That combination caused some dark mode styles to apply to elements in the email template. That is because Outlook Web will respect @media (prefers-color-scheme:dark) (since OS is in dark mode) even though Outlook Web itself is not in dark mode. This is pretty much a bug with Outlook Web.

Nonetheless, weā€™ve implemented a minimal fix. Hereā€™s the relevant commit in core:

6 Likes