Digest-E-Mail: Logo-Farb-/Hintergrundkonflikt (Hell-/Dunkelmodus)

ToddZ · 19. September 2023 um 07:28

Ich verwende das Standardthema ohne Theme-Komponenten oder CSS-Anpassungen. In den Einstellungen habe ich mein weißes „Dark Mode“-Logo für die Digest-E-Mail angegeben, da der Logo-Hintergrundbereich des Digests dunkel ist. Sieht normalerweise großartig aus:

Wenn ich jedoch einen Digest (in der Gmail-App) auf einem iPhone im Geräte-Dark-Mode erhalte, wird der Logo-Hintergrundbereich zu weiß (ähnlich) umgekehrt, wodurch das Logo fast unsichtbar wird:

Auf dem Desktop kann ich den Dark Mode mit dem Chrome-Inspektor in der Vorschau anzeigen. Er kehrt die Logo-Hintergrundfarbe nicht zu weiß um. Aber er tauscht mein Standardlogo („Light Mode“) ein, wodurch es dort fast unsichtbar wird:

Das verwirrt mich ziemlich… Ich weiß nicht, ob ich einen Fehler sehe oder ob ich falsche Erwartungen an den mobilen Dark Mode habe…

Ich stelle mir vor, ich könnte einen schwarzen Rand um mein Standardlogo hinzufügen, damit es auf einem hellen Hintergrund besser funktioniert.
Aber ich würde mich über jeden Hinweis freuen, um Logo+Hintergrund-Kombinationen für Digests zu erzielen, die in allen Einstellungen funktionieren.

simon · 19. September 2023 um 18:14

Nur zur Bestätigung: Haben Sie Änderungen am Discourse HTML-E-Mail-Template vorgenommen, das sich unter Admin / Anpassen / E-Mail-Stil befindet? Haben Sie auch CSS zum CSS-Tab auf dieser Seite hinzugefügt?

Ist die Website-Einstellung Benutzerdefinierte Stile auf Digest anwenden auf Ihrer Website aktiviert? Diese Einstellung ist standardmäßig aktiviert.

Unter der Annahme, dass keine Ihrer Anpassungen das Problem verursacht, vermute ich, dass der Platzhalter %{dark_mode_styles} in der Standard-Discourse-E-Mail-Vorlage durch die CSS ersetzt wird, die auf diese Weise hinzugefügt wird:

github.com/discourse/discourse

app/helpers/email_helper.rb

main


      
          
          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,

Diese Methode fügt der Vorlage die folgende CSS hinzu:

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

Diese CSS soll bewirken, dass der Digest-Header dunkel ist, wenn die E-Mail auf einem Gerät angezeigt wird, das für den Dark Mode eingestellt ist. Möglicherweise ignorieren einige Geräte jedoch die !important-Direktive und zeigen die Umkehrung der Farbe an.

Ich kann das Problem auf meinem Android-Telefon nicht reproduzieren. Ich habe kein iPhone zum Testen. Vielleicht kann jemand anderes versuchen, eine Zusammenfassungs-E-Mail im Dark Mode auf einem iPhone anzuzeigen?

ToddZ · 19. September 2023 um 21:32

Hallo Simon – danke für die Antwort.

Ich habe weder das benutzerdefinierte HTML noch das CSS der E-Mail-Vorlage berührt. Ich habe zwar Benutzerdefinierte Stile auf Digest anwenden deaktiviert, aber wie erwartet hatte dies keine Auswirkungen.

Ich sende gerne eine Zusammenfassungs-E-Mail, wenn mir jemand eine Adresse postet oder per Direktnachricht sendet…

simon · 25. September 2023 um 04:55

Ich habe E-Mails von der Website erhalten. Sie werden in der Gmail-App auf meinem Android-Telefon im Dark Mode korrekt dargestellt. Ich habe kein iOS-Gerät zum Testen.

Auf @ToddZ’s iOS-Gerät erhält er die gleichen Ergebnisse, unabhängig davon, ob die Einstellung apply custom styles to digest aktiviert ist oder nicht:

Ich vermute, dass die Gmail-App für iOS die prefers-color-scheme-Media-Query immer noch nicht unterstützt: Can I email… @media (prefers-color-scheme). Auf dieser Seite steht auch, dass Android sie nicht unterstützt, aber die E-Mails werden bei mir in Gmail unter Android korrekt dargestellt.

In gewisser Weise ist es erwähnenswert, dass die Einstellung apply custom styles to digest aktiviert sein muss, damit die Dark-Mode-CSS, die der E-Mail-Vorlage hinzugefügt wird, angewendet wird.

@isaac, ich bin mir nicht sicher, ob du dich noch darum kümmerst. Es könnte sich lohnen zu testen, wie Gmail unter iOS damit umgeht. Insbesondere wenn das Standardthema der Discourse-Website ein dunkles Farbschema verwendet.

ToddZ · 30. September 2023 um 07:38

Interessanterweise ist mir gerade ein ähnliches Problem mit einer Einladungs-E-Mail unter Windows aufgefallen.
(Diese sieht unter iOS jedoch gut aus.)

Dies ist Win11 22H2 und Thunderbird mit Systemthema (verwendet OS-Licht-/Dunkel-Einstellungen).

Windows im Dunkelmodus:

(Der Hellmodus sieht gut aus.)

simon · 30. September 2023 um 07:48

Wenn Sie die Möglichkeit haben, versuchen Sie bitte, dieselbe E-Mail mit der aktivierten Website-Einstellung apply custom styles to digest auszulösen? Macht diese Einstellung einen Unterschied, wie die E-Mail im Dark Mode in Thunderbird gerendert wird?

Können Sie außerdem noch einmal überprüfen, ob die E-Mail-Vorlage unter Admin / Anpassen / E-Mail-Stil nicht bearbeitet wurde? Wenn sie nicht bearbeitet wurde, ist die Schaltfläche „Auf Standard zurücksetzen“ auf dieser Seite deaktiviert:

Ich frage mich, ob die Schlüssel dark_mode_meta_tags und dark_mode_styles, die ich in der obigen Bildschirmansicht hervorgehoben habe, in der Vorlage vorhanden sind.

ToddZ · 30. September 2023 um 08:02

Sicher – ich habe gerade überprüft:

E-Mail-Stil: HTML und CSS sind auf Standardeinstellungen und wurden nie geändert. HTML enthält die Meta-Tags für den dunklen Modus.
Eigene Stile auf Digest anwenden: Macht keinen Unterschied, egal ob aktiviert oder deaktiviert.

simon · 2. Oktober 2023 um 18:42

Ich vermute, dass die Ursache des Problems im Abschnitt „Standard-Dunkelmodi: Vollständige Farb-Invertierung“ dieses Beitrags beschrieben wird: Dark Mode Email: Your Ultimate How-to Guide - Litmus.

Das Full Color Invert ist das aufdringlichste Farbschema: Es invertiert nicht nur die Bereiche mit hellen Hintergründen, sondern wirkt sich auch auf dunkle Hintergründe aus.

Wenn Sie Ihre E-Mails also bereits mit einem dunklen Thema gestaltet haben, zwingt dieses Schema sie ironischerweise dazu, hell zu werden. Leider ist dies derzeit die Taktik, die von einigen der beliebtesten E-Mail-Clients verwendet wird, wie z. B. der Gmail-App (iOS), Outlook 2021 (Windows), Office 365 (Windows) und Windows Mail.

Das Beispiel des Problems in diesem Beitrag stimmt mit dem überein, was Sie melden:

Jemand mit Zugriff auf das Litmus-Konto von Discourse muss dies testen. Um das Problem zu reproduzieren, versuchen Sie, eine Digest-E-Mail von einer Discourse-Site an Litmus zu senden, deren Farbpalette des Standardthemas auf ein dunkles Farbschema eingestellt ist.

Wenn dies das Problem auslöst, wäre die einfache Lösung, immer ein helles Farbschema für E-Mails zu verwenden, unabhängig von der Farbpalette, die dem Standardthema in Discourse zugewiesen wurde. Es gibt auch einen Ansatz, der im Abschnitt „Gmail iOS & Outlook Windows-spezifisches Targeting“ des von mir verlinkten Beitrags vorgeschlagen wird, der potenziell funktionieren könnte. Es ist jedoch eher ein Hack.

Wer auch immer sich damit befasst, könnte auch die Art und Weise untersuchen, wie die Website-Einstellung Benutzerdefinierte Stile auf Digest anwenden derzeit aktiviert sein muss, um die Unterstützung für den Dunkelmodus für E-Mail-Clients hinzuzufügen, die den Dunkelmodus tatsächlich unterstützen. In der Discourse-Benutzeroberfläche gibt es nichts, was darauf hindeutet, dass diese Einstellung mit der Unterstützung des Dunkelmodus zusammenhängt.

ToddZ · 3. Oktober 2023 um 03:00

Ja, wow, Vollfarbumkehrung scheint das zu sein, was ich sehe, zumindest mit der Zusammenfassung in iOS Gmail.

Mir fehlt im Moment die Bandbreite, um diesen ganzen Artikel zu analysieren und geeignete Workarounds zu finden, aber ich muss es irgendwann versuchen. Der GitHub-Thread zum Posten von Gmail-Beispielen ist seit 2019 offen und es wurden eine Reihe von Workarounds vorgeschlagen, aber es gibt keinen Hinweis darauf, dass das zugrunde liegende Verhalten geändert wird.

Ich hoffe, das Discourse-Team kann einige allgemeine Anpassungen vornehmen, um das Erscheinungsbild plattformübergreifend zu vereinheitlichen.

simon · 15. Oktober 2023 um 07:21

Basierend auf der Digest-E-Mail, die ich von Ihrer Website gesehen habe, gehe ich davon aus, dass Ihre Website ein dunkles Standard-Farbschema hat. In diesem Fall können Sie das Problem mit der Hintergrundfarbe des Headers in der iOS Gmail-App beheben, indem Sie den folgenden Code zum Tab Admin / Anpassen / E-Mail-Stil / CSS Ihrer Website hinzufügen:

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

Beachten Sie, dass die Farben, die zu linear-gradient hinzugefügt werden, beide gleich sein sollten. Sie sollten mit dem Wert übereinstimmen, der für die Farbe “Header-Hintergrund” der Farbpalette Ihres Standardthemas festgelegt ist:

Ich denke, dies ist nur ein guter Ansatz für Websites, die ein dunkles Farbschema als Standard festgelegt haben. Details dazu, warum es funktioniert, finden Sie hier: Investigating activity summary email dark mode issues.

Thema		Antworten	Aufrufe
Investigating activity summary email dark mode issues UX activity-summary	6	2243	23. Januar 2024
Email digest having its own colors Support activity-summary	6	643	2. Oktober 2023
Emailed Forum Posts grayed out in Dark Mode on some Discourse forums Bug	9	1346	23. Januar 2023
Digest logo color Support activity-summary	3	579	15. August 2022
Styling email digest Feature activity-summary	2	1366	25. Februar 2014

Digest-E-Mail: Logo-Farb-/Hintergrundkonflikt (Hell-/Dunkelmodus)

Verwandte Themen