Der Dunkelmodus hat sich zu einer weit verbreiteten Anzeigeeinstellung auf Geräten und Plattformen entwickelt. Mit E-Mail-Clients wie Gmail, Outlook und Apple Mail, die den Dunkelmodus unterstützen, ist es wichtig zu verstehen, wie sich dies auf das E-Mail-Design auswirkt und wie Sie Ihre Kampagnen entsprechend optimieren können.
In diesem Artikel erfahren Sie, was der Dunkelmodus ist, wie Sie Ihre E-Mails im Dunkelmodus anzeigen können, und bewährte Methoden zur Optimierung Ihrer Designs für sowohl helle als auch dunkle Modi.
Was ist der Dunkelmodus?
Der Dunkelmodus ist eine Anzeigeeinstellung, die einen dunklen Hintergrund mit hellem Text verwendet, um die Augenbelastung in schwach beleuchteten Umgebungen zu reduzieren. Seit seiner Einführung hat der Dunkelmodus auf wichtigen Plattformen (iOS, Gmail, Outlook) aus folgenden Gründen an Beliebtheit gewonnen:
Reduzierte Augenbelastung bei schwachem Licht.
Batterieschonung auf OLED-Bildschirmen.
Verbesserte Lesbarkeit von Inhalten auf verschiedenen Geräten.
Ästhetische Präferenz für ein schlankes, modernes Aussehen.
⚠️ Wichtig: Sie können nicht verhindern, dass Ihre E-Mails im Dunkelmodus angezeigt werden, oder die automatische Farbumkehr deaktivieren. Der Dunkelmodus wird von den E-Mail-Clients und Geräteeinstellungen Ihrer Abonnenten (Gmail, Apple Mail, Outlook usw.) und nicht vom Absender gesteuert. Anstatt den Dunkelmodus zu verhindern, konzentrieren Sie sich darauf, E-Mails zu gestalten, die sowohl im hellen als auch im dunklen Modus großartig aussehen.
So greifen Sie auf die Dunkelmodus-Vorschau in Omnisend zu
Um auf die Dunkelmodus-Vorschau in Omnisend zuzugreifen:
Öffnen Sie Ihre E-Mail im Der E-Mail-Builder.
Klicken Sie auf Vorschau in der oberen rechten Ecke.
Sobald Sie sich im Vorschau-Modus befinden, schalten Sie den Schalter auf Vorschau im Dunkelmodus.
Sie können Ihre E-Mail mit zwei Arten der Farb-Inversionsvorschau anzeigen: Voll und Teilweise. Die folgenden Abschnitte erklären, was jede Art bedeutet und wie E-Mail-Clients den Dunkelmodus handhaben.
Arten der Farbumkehr
E-Mail-Clients wenden den Dunkelmodus auf unterschiedliche Weise an, was sich darauf auswirkt, wie Farben angezeigt werden. Das Verständnis dieser Variationen kann helfen, Designs zu erstellen, die sowohl im Dunkel- als auch im Lichtmodus gut aussehen.
1. Vollständige Umkehrung
Kehrt alle Farben um (hell zu dunkel und umgekehrt). Typischerweise angewendet durch:
Outlook Desktop (Windows): Vollständige Umkehrung, wodurch der gesamte Hintergrund dunkel und der Text hell wird.
Gmail Web: Kann eine vollständige Inversion anwenden, insbesondere wenn die E-Mail nicht speziell für den Dunkelmodus optimiert ist.
Yahoo Mail: Ähnlich wie Gmail verwendet Yahoo Mail oft eine vollständige Umkehrung, bei der sowohl Text- als auch Hintergrundfarben umgekehrt werden, um einen besseren Kontrast zu erzielen.
2. Teilweise Umkehrung
Passt nur bestimmte Elemente an, wie z. B. Text, während Bilder und einige Markenfarben unberührt bleiben. Dieser Ansatz ist häufig bei:
Apple Mail (iOS und macOS): Wendet teilweise Umkehrung an, bei der der Text in hellere Farben wechselt, während die Hintergrundfarben und Bilder im Allgemeinen gleich bleiben, es sei denn, sie sind extrem hell.
Outlook Mobile: Verwendet typischerweise eine partielle Inversion, die Text und bestimmte Hintergrundfarben ändert, während Bilder erhalten bleiben.
Gmail Mobile (Android & iOS): Verwendet teilweise Umkehrung, wobei oft Bilder und Hintergrundfarben unberührt bleiben, während die Textfarbe angepasst wird, um die Lesbarkeit im Dunkelmodus zu verbessern.
Beispiel für Farbumkehr im Dunkelmodus. Bildnachweis: https://www.listrak.com/
Um die Lesbarkeit und Markenkonsistenz zu maximieren, gestalten Sie E-Mails mit Blick auf teilweise und vollständige Umkehrungsmodi.
Warum E-Mails auf Mobilgeräten anders aussehen als auf dem Desktop: Der gleiche E-Mail-Client (z. B. Gmail) kann je nach Gerät unterschiedliche Inversionsarten anwenden. Gmail iOS verwendet vollständige Inversion, während Gmail Android teilweise Inversion verwendet. Dies wird durch die Logik des Dunkelmodus des E-Mail-Clients gesteuert, nicht durch Omnisend. Vorschau Ihrer E-Mail sowohl im Voll- als auch im Teil-Dunkelmodus und senden Sie Test-E-Mails an sich selbst auf Mobilgeräten und Desktop, bevor Sie an Ihre Zielgruppe senden.
Dunkelmodus-Kompatibilität in beliebten E-Mail-Clients
Die folgende Tabelle zeigt, wie verschiedene E-Mail-Clients den Dunkelmodus ab Oktober 2023 handhaben. Verwenden Sie dies als Referenz bei der Gestaltung Ihrer E-Mails.
E-Mail-Client | HTML-Behandlung im Dunkelmodus | Unterstützt | [data‐ogsc] Unterstützung | Bemerkenswerte Eigenheiten | |
Apple Mail (MacOS) | Keine Änderung* | ✔ Ja | ✘ Nein | ✔ Ja | Reines Weiß (#ffffff) BGs werden umgekehrt, wenn vorhanden ist |
iPhone / iPad (iOS 16) | Keine Änderung* | ✔ Ja | ✘ Nein | ✔ Ja | Reines Weiß (#ffffff) BGs werden umgekehrt, wenn vorhanden ist |
Teilweise umkehren | ✘ Nein | Teilweise* | ✘ Nein | Helle BG-Farben werden verdunkelt. | |
Outlook 2021 (WinOS) | Vollständige Umkehrung* | ✘ Nein | ✘ Nein | ✘ Nein | Spezielle Zielgruppenansprache ist für VML-Abschnitte möglich. |
Outlook-App (iOS) | Teilweise umkehren | ✘ Nein | Teilweise* | ✘ Nein | Helle BG-Farben werden verdunkelt, und helle Schriftarten auf einem dunklen Hintergrund können ebenfalls verdunkelt werden. |
Outlook-App (Android) | Teilweise Invertierung | ✘ Nein | Teilweise* | ✘ Nein | Helle Hintergrundfarben werden abgedunkelt, und helle Schriftarten auf dunklem Hintergrund können abgedunkelt werden. |
Gmail-App (iOS) | Vollständige Invertierung* | ✘ Nein | ✘ Nein | ✓ Ja | Spezielle Zielgruppenansprache ist für einige Farben und Schriftfarben möglich. |
Gmail-App (Android) | Teilweise Invertierung | ✘ Nein | ✘ Nein | ✓ Ja | |
Office 365 (Win) | Vollständige Invertierung | ✘ Nein | ✘ Nein | ✘ Nein | |
Office 365 (Mac) | Teilweise Invertierung | Teilweise* | ✘ Nein | ✓ Ja | Helle Hintergrundfarben werden abgedunkelt. |
Windows Mail | Vollständige Invertierung | ✘ Nein | ✘ Nein | ✘ Nein |
Hinweis: Das Erzwingen einer konsistenten Hintergrundfarbe hat keinen Einfluss auf die Schriftfarbe, die weiterhin invertiert wird. Die einzigen Ausnahmen sind Clients, die vollständig unterstützen @media oder [data-ogsc] unddie Gmail-App, wo die Farbmischungsreparatur wirksam ist.
Verwendung von erzwungenen Hintergrundfarben (Erweitert)
Einige E-Mail-Clients (Apple Mail, Gmail-Apps, Office 365 Mac) erlauben es Ihnen, Hintergrundfarben mit benutzerdefiniertem CSS im HTML-Element zu erzwingen. Diese Technik funktioniert jedoch nicht in Outlook Desktop, Windows Mail oder Office 365 (Win), die unabhängig von der Invertierung eine vollständige Invertierung anwenden. Selbst wenn sie unterstützt wird, werden die Textfarben weiterhin automatisch invertiert.
Um benutzerdefiniertes CSS in Omnisend hinzuzufügen:
Öffnen Sie Ihre E-Mail im Der E-Mail-Builder.
Gehe zu Elemente hinzufügen auf der linken Seite.
Ziehen Sie das HTML-Element in Ihre E-Mail.
Der HTML-Editor wird rechts angezeigt.
Fügen Sie dort Ihren CSS-Code für den Dunkelmodus ein.
⚠️ Hinweis: Erzwungene Hintergrundfarben sind keine universelle Lösung und erfordern fortgeschrittene CSS-Kenntnisse. Einige E-Mail-Clients können benutzerdefiniertes CSS vollständig ignorieren. Testen Sie immer in echten Posteingängen.
Best Practices für das Design von E-Mails im Dunkelmodus
Um das Erlebnis im Dunkelmodus für deine Abonnenten zu verbessern, befolge diese wesentlichen Design- und Codierungstipps.
Optimiere Logos und Bilder für den Dunkelmodus
Weiße Logos auf weißen Hintergründen: Wenn dein Logo weiß oder sehr hell ist, wird es auf einem weißen Hintergrund im Dunkelmodus (der auf schwarz invertiert) verschwinden. Füge einen farbigen oder transparenten Hintergrund hinter deinem Logo hinzu oder verwende eine helle Umrandung, um die Sichtbarkeit in beiden Modi sicherzustellen. Omnisend unterstützt keinen automatischen Logowechsel zwischen hellen und dunklen Modi – du musst deine Logodatei direkt bearbeiten.
Transparente Bilder: Für Bilder mit dunklem Text auf transparentem Hintergrund füge eine helle, durchscheinende Umrandung hinzu, um sicherzustellen, dass der Text lesbar bleibt, wenn die Farben invertiert werden. Dies ist besonders nützlich für Gmail und Outlook, die oft eine teilweise oder vollständige Farb-Invertierung im Dunkelmodus anwenden.
Beispiel des Logos im Dunkelmodus. Bildnachweis: https://www.litmus.com/
Branding im Dunkelmodus: Verwende subtile, helle Elemente, die im Lichtmodus unsichtbar sind, aber im Dunkelmodus einen einzigartigen, markenbezogenen Touch hinzufügen.
Nicht-transparente Bilder: Fügen Sie um wichtige Elemente in nicht-transparenten Bildern Polsterung hinzu, um Ausrichtungsprobleme zu vermeiden, wenn sich die Farben im Dunkelmodus ändern. Beachten Sie, dass Bilder mit sehr hellen Hintergründen (weiß, gelb usw.) möglicherweise dennoch von E-Mail-Clients wie Gmail, iOS und Outlook Mobile invertiert werden, auch wenn sie nicht transparent sind. Dies wird vom E-Mail-Client gesteuert, nicht von Omnisend.
Verwende schwarzen Text auf weißem Hintergrund für Textinhalte
Den Textinhalt schwarz auf einem weißen Hintergrund zu halten, ist eine einfache, aber effektive Möglichkeit, die Lesbarkeit in beiden Modi zu gewährleisten. Dies minimiert unerwünschte Farbänderungen und ermöglicht es dir, dich auf kreative Designelemente außerhalb des Haupttextbereichs zu konzentrieren.
Fügen Sie Basisstile für den Dunkelmodus in Ihren E-Mail-Vorlagen hinzu
Durch die Einbeziehung spezifischer Dunkelmodus-Stile in deine Vorlagen kannst du sicherstellen, dass alle deine E-Mails korrekt angezeigt werden – selbst wenn du vergisst, die Stile für den Dunkelmodus anzupassen.
Hier ist ein schnelles Beispiel für CSS-Basistile:
.darkbg { background-color: black !important; } .h1, .h2 { color: white !important; } .button { background-color: white !important; color: black !important; }Schneller Tipp: Die Verwendung von Klassen wie .darkbg für Hintergründe und .button für CTA-Buttons ermöglicht schnelle Aktualisierungen über mehrere E-Mails hinweg und sorgt für Konsistenz im Dunkelmodus.
Um dieses CSS in Omnisend hinzuzufügen: Gehe zu Elemente hinzufügen → ziehe die HTML-Element in Ihre E-Mail → fügen Sie den Code in den Editor ein, der rechts erscheint.
Teste/Überprüfe E-Mails immer in Omnisend
Verwende die Vorschaufunktion (Dunkelmodus-Umschalter aktiviert) in Omnisend, um deine E-Mails für beliebte Clients wie Gmail, Outlook und Apple Mail sowie verschiedene Betriebssysteme vorzuschauen. Überprüfe die Lesbarkeit, Markenfarben und die korrekte Anzeige von Logos und Bildern.
💡 Tip: Die Dunkelmodus-Vorschau zeigt, wie Ihre E-Mail wahrscheinlich gerendert wird, aber die Darstellung durch den E-Mail-Client kann variieren. Senden Sie sich immer eine Test-E-Mail und sehen Sie sie in tatsächlichen Postfächern (Gmail, Outlook, Apple Mail auf Mobilgeräten und Desktop), um das endgültige Erscheinungsbild vor dem Versand an Ihre Zielgruppe zu bestätigen.
Halte Designelemente einfach und konsistent
Einfache Hintergründe (schwarz für den Dunkelmodus und weiß für den Hellmodus) verbessern die Lesbarkeit und verringern das Risiko von Designabweichungen zwischen E-Mail-Clients. Integrieren Sie subtile Kontraste oder Schatten für zusätzliche Tiefe, ohne die Funktionalität des Dunkelmodus zu beeinträchtigen.
Häufige Probleme & Lösungen
Meine benutzerdefinierten Farben sehen nach der Gestaltung für beide Modi immer noch falsch aus.
Einige E-Mail-Clients (wie Gmail iOS und Outlook Desktop) wenden eine vollständige Farb-Inversion an, die Ihr benutzerdefiniertes Design überschreibt, selbst wenn Sie für beide Modi entworfen haben. Dies ist eine Einschränkung des E-Mail-Clients, kein Problem von Omnisend.
Umgehung: Erstellen Sie separate E-Mail-Blöcke für Mobilgeräte und Desktop mit Sichtbarkeitseinstellungen und gestalten Sie die mobilen Blöcke mit dunkleren Tönen, die im Dunkelmodus weniger aggressiv invertiert werden. Vorschau immer in sowohl Voll- als auch Teil-Dunkelmodi und senden Sie Test-E-Mails an sich selbst auf Mobilgeräten und Desktop, um das endgültige Rendering zu sehen.
Meine E-Mail sieht auf Mobilgeräten anders aus als auf. Desktop
Der gleiche E-Mail-Client kann je nach Gerät unterschiedliche Arten der Dunkelmodus-Inversion anwenden. Zum Beispiel verwendet Gmail iOS eine vollständige Farb-Inversion (alle Farben umkehren), während Gmail Android eine partielle Inversion verwendet (Text und einige Hintergründe anpassen). Dies wird von der Dunkelmodus-Logik des E-Mail-Clients gesteuert, nicht von Omnisend.
Lösung: Vorschau Ihrer E-Mail sowohl im Voll- als auch im Teil-Dunkelmodus in Omnisend und senden Sie Test-E-Mails an sich selbst auf Mobilgeräten und Desktop, bevor Sie an Ihre Zielgruppe senden.
Die Vorschau stimmt nicht mit dem überein, was ich in meinem Posteingang sehe.
Die Dunkelmodus-Vorschau gibt Ihnen eine ungefähre Vorstellung davon, wie Ihre E-Mail in den Modi Voll- und Teil-Inversion gerendert wird, aber die Darstellung durch den E-Mail-Client kann leicht variieren.
Lösung: Senden Sie sich immer eine Test-E-Mail und sehen Sie sie in tatsächlichen Postfächern (Gmail, Outlook, Apple Mail auf Mobilgeräten und Desktop), um das endgültige Erscheinungsbild vor dem Versand an Ihre Zielgruppe zu bestätigen.
Häufig gestellte Fragen
Kann ich verhindern, dass meine E-Mails im Dunkelmodus angezeigt werden?
Nein, Sie können nicht verhindern, dass E-Mails im Dunkelmodus angezeigt werden oder einen weißen Hintergrund in allen E-Mail-Clients erzwingen. Der Dunkelmodus wird von den E-Mail-Clients und Geräteeinstellungen jedes Abonnenten (Gmail, Apple Mail, Outlook usw.) und nicht vom Absender gesteuert. Einige E-Mail-Clients wenden eine vollständige Farb-Inversion an (wobei weiße Hintergründe schwarz werden), während andere eine teilweise Inversion anwenden. Anstatt zu versuchen, den Dunkelmodus zu verhindern, gestalten Sie Ihre E-Mails so, dass sie sowohl im Licht- als auch im Dunkelmodus großartig aussehen, indem Sie unsere Vorschaufunktion für den Dunkelmodus verwenden.
Wie kann ich meine Hintergrundfarben im Dunkelmodus gleich halten?
Omnisend hat keine integrierte Funktion, um Hintergrundfarben zu erzwingen. Sie können benutzerdefiniertes CSS mit dem HTML-Element im E-Mail-Builder hinzufügen, um erzwungene Hintergrundfarben für einige E-Mail-Clients (Apple Mail, Gmail-Apps) anzuwenden. Diese Technik funktioniert jedoch nicht in Outlook Desktop, Windows Mail oder Office 365 (Win), die unabhängig von der Farb-Inversion angewendet werden. Selbst wenn unterstützt, werden die Textfarben weiterhin automatisch invertiert. Um benutzerdefiniertes CSS hinzuzufügen: Gehen Sie zu Elemente hinzufügen → ziehen Sie das HTML-Element in Ihre E-Mail → fügen Sie Ihren CSS-Code in den Editor ein, der rechts erscheint.
Warum verschwindet mein weißes Logo im Dunkelmodus?
Wenn Ihr Logo weiß oder sehr hell ist und auf einem weißen Hintergrund platziert ist, wird es im Dunkelmodus verschwinden, weil der Hintergrund auf schwarz umkehrt, das Logo jedoch weiß bleibt (oder dunkler wird). Um dies zu beheben, fügen Sie einen farbigen oder transparenten Hintergrund hinter Ihrem Logo hinzu oder wenden Sie eine helle Kontur an, um sicherzustellen, dass es sowohl im Licht- als auch im Dunkelmodus sichtbar bleibt. Vorschau immer Ihre E-Mail im Dunkelmodus, bevor Sie sie senden.
Wo füge ich den CSS-Code für den Dunkelmodus in Omnisend hinzu?
Um benutzerdefiniertes CSS in Omnisend hinzuzufügen: Öffnen Sie Ihre E-Mail im Der E-Mail-Builder, gehen Sie zu Elemente hinzufügen auf der linken Seite, ziehen Sie das HTML-Element in Ihre E-Mail, und der HTML-Editor wird rechts angezeigt. Fügen Sie dort Ihren CSS-Code für den Dunkelmodus ein. Beachten Sie, dass einige E-Mail-Clients benutzerdefiniertes CSS vollständig ignorieren können – testen Sie Ihre E-Mail immer in echten Postfächern.
Warum sehen meine E-Mails im Dunkelmodus auf dem Handy anders aus als auf dem Desktop?
Der gleiche E-Mail-Client kann je nach Gerät unterschiedliche Arten der Dunkelmodus-Inversion anwenden. Zum Beispiel verwendet Gmail iOS eine vollständige Farb-Inversion (alle Farben umkehren), während Gmail Android eine partielle Inversion verwendet (Text und einige Hintergründe anpassen). Dies wird von der Dunkelmodus-Logik des E-Mail-Clients gesteuert, nicht von Omnisend. Um sicherzustellen, dass Ihre E-Mail auf verschiedenen Geräten gut aussieht, sehen Sie sie sowohl im Voll- als auch im Teil-Dunkelmodus in Omnisend an und senden Sie Test-E-Mails an sich selbst auf Mobilgeräten und Desktop, bevor Sie an Ihre Zielgruppe senden.
Was ist, wenn meine benutzerdefinierten Farben nach dieser Anleitung immer noch falsch aussehen?
Einige E-Mail-Clients (wie Gmail iOS und Outlook Desktop) wenden eine vollständige Farb-Inversion an, die Ihr benutzerdefiniertes Design überschreibt, selbst wenn Sie für beide Modi entworfen haben. Dies ist eine Einschränkung des E-Mail-Clients, kein Problem von Omnisend.
Umgehung: Erstellen Sie separate E-Mail-Blöcke für Mobilgeräte und Desktop mit Sichtbarkeitseinstellungen und gestalten Sie die mobilen Blöcke mit dunkleren Tönen, die im Dunkelmodus weniger aggressiv invertiert werden. Vorschau immer in sowohl Voll- als auch Teil-Dunkelmodi und senden Sie Test-E-Mails an sich selbst auf Mobilgeräten und Desktop, um das endgültige Rendering zu sehen.
Zeigt die Dunkelmodus-Vorschau genau, wie meine E-Mail in Postfächern aussehen wird?
Die Dunkelmodus-Vorschau gibt Ihnen eine ungefähre Vorstellung davon, wie Ihre E-Mail in den Modi Voll- und Teil-Inversion gerendert wird, aber die Darstellung durch den E-Mail-Client kann leicht variieren. Senden Sie sich immer eine Test-E-Mail und sehen Sie sie in tatsächlichen Postfächern (Gmail, Outlook, Apple Mail auf Mobilgeräten und Desktop), um das endgültige Erscheinungsbild vor dem Versand an Ihre Zielgruppe zu bestätigen.
Warum ändern sich die Farben meiner Bildhintergründe im Dunkelmodus?
E-Mail-Clients wie Gmail und Outlook auf Mobilgeräten wenden Farb-Inversion auf Bilder mit sehr hellen Hintergründen (weiß, gelb usw.) an, selbst wenn das Bild nicht transparent ist. Dies wird vom E-Mail-Client gesteuert, nicht von Omnisend. Um dies zu reduzieren, verwenden Sie Bilder mit nicht rein weißen Hintergründen oder fügen Sie Polsterungen/Ränder um wichtige Elemente hinzu.
Kann ich Dunkelmodusfarben in Markenassets festlegen?
Nein. Markenassets (Akzent-, Dunkel-, Hellfarben) gelten für E-Mail-Vorlagen, steuern jedoch nicht die Dunkelmodus-Darstellung in E-Mail-Clients. Um für den Dunkelmodus zu optimieren, verwenden Sie bewährte Designpraktiken oder fügen Sie benutzerdefiniertes HTML mit CSS für den Dunkelmodus hinzu.
Können Sie nicht finden, wonach Sie suchen? Unser 24/7-Support-Team ist für Sie da. Schreiben Sie uns in der App oder per E-Mail [email protected].