Die Dunkelmodus-Unterstützung in E-Mails teilt sich in drei Gruppen, und nur eine davon entspricht dem CSS, für das die meisten Absender gestalten. Einige Clients beachten @media (prefers-color-scheme: dark) genau wie geschrieben. Andere schreiben es unbemerkt in eine Syntax um, die niemals zutreffen kann, und greifen anschließend auf ihre eigenen Heuristiken zur automatischen Farbumkehr zurück. Eine dritte Gruppe beachtet das neuere color-scheme-Meta-Tag kaum. Wer nur für die erste Gruppe gestaltet, gestaltet für weniger als die Hälfte der Posteingänge.
Gruppe eins: Clients, die die Media Query beachten
Laut caniemail.com wird @media (prefers-color-scheme: dark) in Gmail (alle Plattformen) und Apple Mail (macOS 12.4+ / iOS 13.0+) vollständig unterstützt. Outlook folgt auf den meisten seiner Oberflächen dicht dahinter — Windows (2016+), macOS (16.70+), Outlook.com (2019-07+) und Mobilgeräte (2020-01+) erkennen die Abfrage alle, wobei Outlook für macOS und Outlook.com zusätzlich ihre eigenen Dunkelmodus-Datenattribute anwenden. Samsung Email (Android 6.1+) implementiert sie ebenfalls vollständig. Zusammengenommen beziffert das getestete Panel von caniemail.com die Gesamtunterstützung auf 41.86% — eine echte Mehrheit der großen Clients, aber längst nicht alle.
Gruppe zwei: Clients, die die Abfrage so umschreiben, dass sie nie zutrifft
Diese Gruppe erzeugt die fehlerhaft wirkenden Dunkelmodus-E-Mails, die die meisten Absender schon gesehen haben. Yahoo Mail, AOL und Fastmail ignorieren prefers-color-scheme nicht vollständig — sie schreiben es in ungültige Syntax (@media ( _filtered_a )) um, die niemals wahr sein kann, und deaktivieren so unbemerkt jede darin enthaltene Regel. HEY bewirkt dasselbe, indem es die Abfrage in @media (false) umschreibt. In beiden Fällen greift der Client anschließend auf seine eigenen Heuristiken zur automatischen Farbumkehr des ursprünglichen Hellmodus-Designs zurück. Genau dadurch entstehen ausgewaschene Logos und unleserliche Texte mit geringem Kontrast, die niemand bewusst so gestaltet hat, weil nichts vom Absender Geschriebenes das Ergebnis tatsächlich steuert.
Gruppe drei: das kaum verbreitete color-scheme-Meta-Tag
<meta name="color-scheme" content="light dark"> (und sein Verwandter supported-color-schemes) teilt einem Client mit, für welche Darstellungsmodi eine E-Mail bewusst gestaltet wurde. So kann der Client vollständig auf die automatische Farbumkehr verzichten, statt zu raten. Es ist die präzisere Lösung — laut caniemail.com liegt die kombinierte Verbreitung jedoch nur bei 4.88%. Nennenswerte Unterstützung beschränkt sich auf neuere Versionen von Apple Mail (macOS 16+ / iOS 12.4+) und Gmail Desktop-Webmail (2023-09+). Die meisten anderen Clients ignorieren es vollständig.
Was das für das Design bedeutet
Keine einzelne CSS-Regel deckt alle drei Gruppen gleichzeitig ab — das ist eine direkte Folge der beschriebenen Aufteilung und keine Lücke einer bestimmten Technik. Der verlässliche Ansatz ist Progressive Enhancement, dasselbe Prinzip, zu dem auch Litmus' Leitfaden zum Dunkelmodus kommt:
- Gestalten Sie zuerst eine solide und vollständig lesbare E-Mail im Hellmodus. Sie ist die Basis, auf die jeder Client zurückfällt, einschließlich der automatisch invertierenden Clients aus Gruppe zwei.
- Legen Sie explizite
prefers-color-scheme-Überschreibungen darüber, für die ~42% der Clients, die sie tatsächlich anwenden — verlassen Sie sich angesichts der deutlich geringeren Verbreitung nicht allein auf das Meta-Tag. - Machen Sie Logo- und Bilddateien robust gegen automatische Farbumkehr: Ein halbtransparentes PNG auf einem harten weißen Hintergrund kann in den Clients aus Gruppe zwei zu einem unleserlichen Dunkel-auf-Dunkel-Chaos invertiert werden. Eine dezente Umrandung oder ein einfarbiges Hintergrundfeld hinter der Grafik übersteht die Umkehr auf eine Weise, die ein freigestelltes transparentes PNG nicht schafft.
- Gehen Sie niemals davon aus, dass ein dunkler Hintergrund eine dunkelmodusgerechte Textfarbe bedeutet — die automatische Farbumkehr aus Gruppe zwei kann einen Hintergrund ändern, ohne den Text so anzupassen, wie der Absender es erwartet. Explizit festgelegte Textfarben sind im Dunkelmodus deshalb wichtiger, nicht weniger wichtig.
Unter E-Mail-Client-Unterstützung finden Sie dieselbe Aufschlüsselung nach Client, angewendet auf MailInApps eigenes Studio und seine Fallback-Engine.