Untersuchung von Problemen mit dem Dark-Mode der Aktivitätszusammenfassungs-E-Mail

UX
1

Dies sollte ein kurzer Beitrag mit ein paar Bildern und einer einfach anzuwendenden Lösung sein. Es ist außer Kontrolle geraten. HTML-E-Mail ist schwierig. Zum Spaß, hier ist, wie es schiefgehen kann: Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub :slight_smile:

Sie können diesen Beitrag gerne überfliegen und sich die Bilder ansehen. Am Ende des Beitrags kam ich mehr oder weniger zu dem Schluss, dass es aufgrund der Beliebtheit des dunklen Modus lohnenswert sein könnte, die Digest-E-Mail zu überarbeiten, anstatt zu versuchen, Hacks auf den aktuellen Code anzuwenden. Das liegt nicht in meiner Hand, und vielleicht habe ich mir das einfach zu lange angesehen.

Es gab einige aktuelle Fragen, wie Digest-E-Mails auf E-Mail-Clients gerendert werden, die auf dunkles Modus eingestellt sind. Das Hauptproblem ist, dass die Hintergrundfarbe des Digest-Headers auf E-Mail-Clients, die den dunklen Modus durch eine vollständige Farb-Invertierung handhaben (Gmail-App (iOS), Outlook 2021 (Windows), Office 365 (Windows) und Windows Mail), invertiert wird. Dies führt zu einem Kontrastproblem zwischen der Header-Farbe und dem Website-Logo.

Diese E-Mail-Clients haben auch Probleme mit der Textfarbe in Schaltflächen und im Abschnitt “Seit Ihrem letzten Besuch” des Digests.

Alle unten stehenden Bilder stammen vom Litmus E-Mail-Testdienst:

Von einer Discourse-Website mit einem dunklen Farbschema, die ein weißes PNG-Logo mit transparentem Hintergrund verwendet:

Erwartet (Gmail App Dunkel für Android):

image
image644×910 54.8 KB

Schlecht (Gmail Dunkel für iOS, OL Office 365 Dunkel, Outlook 2021 Dunkel, Windows 10 Mail Dunkel):

image
image591×909 68.6 KB

image
image1468×929 38.8 KB

Übersicht der mobilen Clients (Gmail für iOS ist der einzige Client mit offensichtlichen Problemen mit der Header-Farbe):

image
image1261×1107 174 KB

Hier ist der gleiche Test mit der Meta-Digest-E-Mail (Standard-helles Farbschema, dunkles PNG-Logo auf transparentem Hintergrund). Beachten Sie, dass Meta die Website-Einstellung apply custom styles to digest nicht aktiviert hat, sodass sie keine Dark-Mode-Metatags und -Stile für Clients erhält, die diese unterstützen (Apple Mail und neuere Versionen von iOS Mail). Wenn die Einstellung apply custom styles to digest aktiviert wäre, vermute ich, dass die iPhone Dark-Tests auch Probleme mit dem Kontrast zwischen Logo und Hintergrundfarbe hätten.

image
image613×1011 64.1 KB

image
image526×898 94.2 KB

image
image1333×1137 329 KB

Es gibt ein paar Möglichkeiten, wie die Hintergrundfarbe des E-Mail-Headers gezwungen werden kann, mit der Farbe des Standardfarbschemas der Website übereinzustimmen:

Für die Gmail-App für iOS kann die Hintergrundfarbe des Headers mit einem Hintergrundbild gesetzt werden, das mit einem linear-gradient erstellt wurde. Auf diese Weise erstellte Hintergrundbilder werden nicht farblich invertiert. Der Trick besteht darin, beide Farben des linear-gradient auf den Wert der “Header-Hintergrundfarbe” des Standardfarbschemas der Discourse-Website zu setzen.

image
image638×901 70.8 KB

Dies kann jetzt erreicht werden, indem benutzerdefinierte CSS zum Tab Admin / Customize / Email Style / CSS hinzugefügt werden. Setzen Sie die Farbwerte auf den Wert der “Header-Hintergrundfarbe” Ihres Standardfarbschemas. (Beachten Sie, dass es nicht möglich ist, var(--header_background) zu verwenden, um die Farbe im E-Mail-CSS-Editor festzulegen):

.digest-header {
    background-image: linear-gradient(#111, #111);
}

Beim Testen dieses Ansatzes für die Meta-Digest-E-Mail beginne ich, Zweifel daran als Lösung für Websites mit einem hellen Standardfarbschema zu haben. Das Logo ist lesbar, aber sieht das nicht ein wenig seltsam aus?

image
image1283×612 184 KB

Für die Desktop-E-Mail-Clients Outlook 2021 Dark und Windows 10 Mail Dark kann das Problem der Invertierung der Header-Hintergrundfarbe behoben werden, indem eine !important-Regel zur background-color hinzugefügt wird, die für .digest-header gesetzt ist. Dies kann nicht über benutzerdefiniertes CSS erreicht werden, da Discourse bereits einen background-color-Stil zu dem Element hinzufügt, ohne die !important-Regel. Diese Regel wird nach dem benutzerdefinierten CSS hinzugefügt, sodass sie Vorrang hat. (Beachten Sie, dass dieser Ansatz nur zu funktionieren scheint, um die Hintergrundfarbe auf eine dunkle Farbe zu erzwingen. Er schlägt fehl, wenn ich versuche, den Header-Hintergrund auf #ffffff zu erzwingen.)

Das Problem mit der Textfarbe im Abschnitt “Seit Ihrem letzten Besuch” für E-Mail-Clients, die eine vollständige Farb-Invertierung durchführen, scheint keine einfache Lösung zu haben. Hier wird ein iOS-Gmail-Hack vorgeschlagen: Fixing Gmail’s dark mode issues with CSS Blend Modes — HTeuMeuLeu.com. Er verwendet Mischmodi, um Gmail dazu zu bringen, eine weiße Textfarbe einzustellen. Das funktioniert theoretisch, aber angesichts der Komplexität des Markup der Digest-E-Mail glaube ich nicht, dass es sich lohnt, dies weiter zu verfolgen.

Zusammenfassend denke ich, dass für Discourse-Websites mit einem dunklen Farbschema als Standardfarbschema eine gute Lösung für den Moment darin besteht, das oben gepostete CSS zum Tab “Email Style / CSS” hinzuzufügen. Dies macht das Website-Logo in der iOS Gmail Dark-App lesbar. Das Hinzufügen hat bei anderen getesteten E-Mail-Clients keine Probleme verursacht. Für Websites mit einem Standard- hellen Farbschema bin ich mir bei diesem Ansatz weniger sicher. Das Erzwingen eines weißen Header-Hintergrunds auf einem ansonsten dunklen Bildschirm sieht nicht gut aus.

Die Digest-E-Mail wurde entwickelt, bevor der dunkle Modus häufig verwendet wurde. Vielleicht wäre es angesichts der jüngsten Popularität des dunklen Modus sinnvoll, die Digest-E-Mail mit dem Ziel zu überarbeiten, sie sowohl im dunklen als auch im hellen Modus auf gängigen E-Mail-Clients gut darzustellen.

Wenn die vollständige Überarbeitung der Digest-E-Mail außer Reichweite ist, könnte es sich lohnen, die Bereitstellung von dark_mode_digest_logo- und light_mode_digest_logo-Einstellungen in Betracht zu ziehen. Auf zumindest einigen E-Mail-Clients wird es möglich sein, den Modus zu erkennen und das entsprechende Logo anzuzeigen.

Um den dunklen Modus auf Outlook-Desktop-Clients zu verbessern, könnte Discourse einige Klassennamen im HTML der E-Mail belassen, anstatt sie alle zu entfernen. Diese Klassennamen könnten verwendet werden, um den dunklen Modus auf Outlook zu zielen: https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402. (Beachten Sie, dass Outlook keine mehreren Klassennamen auf einem Element verarbeiten kann, daher müssten einige Klassennamen immer noch aus der Datei digest.html.erb entfernt werden.)

7 „Gefällt mir“
2

Mir ist aufgefallen, dass ich das offensichtlichste Problem vielleicht nicht klar genug dargestellt habe. Die Website-Einstellung apply custom styles to digest ist standardmäßig aktiviert. Diese Einstellung wird verwendet, um Metatags und CSS-Regeln hinzuzufügen, die dazu führen, dass iOS-E-Mail-Clients E-Mails im Dark Mode anzeigen, wenn der Benutzer den Dark Mode auf dem Gerät aktiviert hat.

Wenn nicht besonders darauf geachtet wird, ein Digest-Logo hochzuladen, das einen ausreichenden Kontrast sowohl zu hellen als auch zu dunklen Hintergründen aufweist, sehen Digest-E-Mails von Websites mit einem für helle Hintergründe optimierten Logo, die im Dark Mode auf gängigen E-Mail-Clients angezeigt werden, ungefähr so aus:

image
image1279×1119 211 KB

Das Deaktivieren der Website-Einstellung apply custom styles to digest führt tatsächlich zu besseren Ergebnissen. Wenn diese Einstellung deaktiviert ist, werden keine Dark-Mode-Stile auf iOS-Mail-Apps angewendet. Sie werden jedoch weiterhin auf Android-E-Mail-Clients und die iOS-Gmail-App angewendet.

Möglicherweise sollte die aktuelle Best Practice darin bestehen, zu versuchen, ein Logo für die Website-Einstellung digest logo hochzuladen, das sowohl auf hellen als auch auf dunklen Hintergründen gut aussieht. Wenn dies nicht möglich ist, sollten Discourse-Websites mit einem hellen Standard-Farbschema die Website-Einstellung apply custom styles to digest deaktivieren. Discourse-Websites mit einem dunklen Standard-Farbschema sollten die Einstellung aktiviert lassen. Nehmen Sie den Rat bezüglich der Website-Einstellung apply custom styles to digest noch nicht als endgültig an, aber basierend auf einigen Tests scheint dies der richtige Ansatz zu sein.

Dies würde nur für E-Mail-Clients funktionieren, die @media (prefers-color-scheme) unterstützen: Can I email… @media (prefers-color-scheme). Es bestünde ein gewisses Risiko, dass auf anderen E-Mail-Clients beide Versionen des Logos angezeigt werden.

5 „Gefällt mir“
3

Vielen Dank für diese gründliche Arbeit, Simon :+1: :exploding_head:

Das ist furchtbar. Ich erlebe das auf meinem Smartphone und verstehe nicht einmal, wie das erzwungene Invertieren von Farben unabhängig vom Inhalt als gute Idee angesehen wurde.

3 „Gefällt mir“
4

Ich frage mich, ob eine mögliche Lösung darin bestehen könnte, anstatt des Logos ein Bild im Rechteckformat zu erstellen, das das Website-Logo und die aktuelle Hintergrundfarbe des Website-Headers verwendet.

Wir müssten dies im Backend tun, aber die Verwendung eines Bildblocks mit der enthaltenen Farbe als Hintergrund würde verhindern, dass Gmail die Farbe des Hintergrunds invertiert.

Nur zur Information: Ich habe mehrere E-Mails großer Marken in meiner Gmail-App getestet, während sie im Dark Mode eingestellt war, und die Mehrheit von ihnen hat dies noch nicht gelöst.

2 „Gefällt mir“
5

Ohne dies zu tun, ist es möglich, die Hintergrundfarben bei den meisten E-Mail-Clients zu erzwingen. Ausnahmen scheinen einige der älteren Outlook-Desktop-E-Mail-Clients zu sein. (Ich vermute, dass der Dunkelmodus auf Desktop-Clients nicht so häufig verwendet wird.)

Für iOS (mit Ausnahme von Gmail) E-Mail-Clients macht Discourse dies bereits, wenn die Einstellung apply custom styles to digest aktiviert ist. Das Problem ist, dass die Hintergrundfarbe fest codiert ist und nicht die “header background”-Farbe der Website berücksichtigt:

Die Regel [dm='header'] könnte geändert werden zu:

"
[dm='header'] {
  background: ##{ColorScheme.hex_for_name('header_background')} !important;
}
"

Wenn es sinnvoll wäre, könnte ein ähnlicher Ansatz für den Abschnitt “Seit Ihrem letzten Besuch” verfolgt werden:

"
[dm='body_primary'] {
  background: #{SiteSetting.email_accent_bg_color} !important;
  color: #{SiteSetting.email_accent_fg_color} !important;
}
"

Beachten Sie, dass das dm-Attribut für Dunkelmodus-Stile hier zu der E-Mail hinzugefügt wird: discourse/lib/email/styles.rb at main · discourse/discourse · GitHub.

So etwas sollte funktionieren, um das Problem bei iOS (mit Ausnahme von Gmail) E-Mail-Clients zu beheben.

Für den iOS Gmail-Client können die Hintergrundfarben erzwungen werden, indem sie mit einem linearen Farbverlauf gesetzt werden. Es scheint keine unbeabsichtigten Nebenwirkungen zu geben, wenn ein linearer Farbverlaufshintergrund auf diese Weise für alle E-Mail-Clients gesetzt wird. Daher sollte es in Ordnung sein, einfach eine lineare Farbverlaufshintergrundfarbe zu den Inline-CSS hinzuzufügen, die an alle E-Mail-Clients gesendet werden.

Ich vermute, dass die einfachste Lösung für den Abschnitt “Seit Ihrem letzten Besuch” für E-Mail-Clients, die eine vollständige Farb-Invertierung durchführen, darin besteht, die Clients die Invertierung durchführen zu lassen, aber sicherzustellen, dass es einen hohen Kontrast zwischen den Einstellungen für email accent accent bg color und email accent fg color gibt:

image
image766×219 17 KB

Dies sollte Fälle wie diesen (mit den Standardwerten dieser Einstellungen) verhindern:

image
image532×623 47.5 KB

1 „Gefällt mir“
6

Die einfachste Änderung, die Discourse jetzt vornehmen könnte, um die Wahrscheinlichkeit zu erhöhen, dass Zusammenfassungs-E-Mails im Dunkelmodus korrekt angezeigt werden, wäre, die Website-Einstellung apply custom styles to digest nicht standardmäßig zu aktivieren. (Hinweis: Dies wirkt sich nur auf E-Mail-Clients unter iOS aus.)

Eine weitere kleine Änderung wäre, den Text der Website-Einstellung digest logo zu aktualisieren, um das Hochladen eines Logos zu fördern, das einen ausreichenden Kontrast aufweist, wenn es gegen eine helle oder dunkle Hintergrundfarbe angezeigt wird. Der gängige Trick für dunkle Logos ist, dem Logo eine weiße Umrandung hinzuzufügen.

Möglicherweise sollte die Seite Emails / Preview summary eine Warnung anzeigen, dass einige E-Mail-Clients eine “vollständige Farb-Invertierung” durchführen, wenn die E-Mail im Dunkelmodus angezeigt wird. Website-Besitzer könnten ermutigt werden, ihre Zusammenfassungs-E-Mails im Dunkelmodus auf den E-Mail-Clients zu testen, auf die sie Zugriff haben.

1 „Gefällt mir“
7

Danke für die Details!

Als schnelle Übergangslösung habe ich dies zu den E-Mail-Einstellungen hinzugefügt:

@media (prefers-color-scheme: dark) {
    body > div > table > tbody > tr > td > table[dm="header"] {
        background: #c89f4c !important;
    }
}

Dadurch wird der Header-Hintergrund heller und mein Logo wird nun richtig angezeigt (zumindest in der Vorschau).