Warum dieselbe E-Mail unterschiedlich aussieht
Es gibt keine einzige Dark-Mode-Umsetzung für alle E-Mail-Programme. Je nach App und Version werden definierte Farben beibehalten, teilweise umgerechnet oder weitgehend verändert. Die Unterstützung von prefers-color-scheme ist deshalb eine nützliche Zusatzfunktion, keine universelle Lösung.
Testen Sie Ihre tatsächlichen Empfängeroberflächen. „Outlook“ oder „Gmail“ ist als Testbeschreibung zu ungenau: Weboberfläche, Android-App, iOS-App und Desktopprogramm können unterschiedlich reagieren. Notieren Sie App, Betriebssystem, Version und Darstellungsmodus.
Ein kleines HTML-Beispiel mit lesbarem Grundzustand
Das Beispiel verwendet eine tabellenbasierte Inhaltsfläche, ausdrücklich gesetzte Grundfarben und eine optionale dunkle Farbpalette. Der CTA ist ein echter Textlink. Es braucht kein JavaScript und kein Bild, um die Hauptaussage zu verstehen.
Eigenes Minimalbeispiel für eine HTML-E-Mail. Den Beispiel-Link durch Ihre tatsächliche Zielseite ersetzen und im Versanddienst testen.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Ihre Bestellung</title>
<style>
@media (prefers-color-scheme: dark) {
.mail-bg { background-color: #101820 !important; }
.mail-card { background-color: #172733 !important; }
.mail-text { color: #f3f6f8 !important; }
.mail-cta {
background-color: #bfe5f2 !important;
color: #08364d !important;
}
}
</style>
</head>
<body class="mail-bg" style="margin:0;background-color:#eef3f6;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" class="mail-card" width="100%"
cellspacing="0" cellpadding="0"
style="max-width:600px;background-color:#ffffff;">
<tr><td class="mail-text"
style="padding:32px;color:#15364a;font-family:Arial,sans-serif;
font-size:17px;line-height:1.6;">
<h1 style="font-size:26px;line-height:1.3;">Ihre Bestellung ist unterwegs</h1>
<p>Den aktuellen Status finden Sie in Ihrem Kundenkonto.</p>
<a class="mail-cta" href="https://example.com/bestellung"
style="display:inline-block;padding:12px 20px;
background-color:#08364d;color:#ffffff;
font-weight:bold;text-decoration:underline;">
Bestellstatus ansehen
</a>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>Die Inline-Farben bilden den hellen Grundzustand. Die Media Query überschreibt sie in unterstützenden Programmen. Entfernt ein Programm den Style-Block, bleibt der Inhalt als Text erhalten. Ein Programm mit eigener Farbumrechnung kann trotzdem andere Farben erzeugen. Auch dieses Beispiel muss daher durch Ihren normalen Versandweg getestet werden.
Welche Zeile welches Problem löst
Im hellen Grundzustand trägt der Button weißen Text auf #08364d. Diese Farben stehen direkt am Link. Der Text und die Handlung bleiben dadurch vorhanden, auch wenn das Mailprogramm den Style-Block entfernt. Die Tabellen sind reine Layouttabellen und deshalb mit role="presentation" gekennzeichnet.
Die Klassen .mail-bg, .mail-card und .mail-text verbinden die Elemente mit der optionalen dunklen Palette. Unterstützt das Programm die Media Query, erhält der Button einen hellen Hintergrund und dunklen Text. Die Meta-Tags allein führen diesen Farbwechsel nicht aus.
Ein konkreter Fehlerfall ist weißer Buttontext vor einer von der App aufgehellten Fläche. Prüfen Sie dann zuerst, ob die dunkle Regel überhaupt angewendet wird oder die App ihre eigene Farbumrechnung nutzt. Zusätzliche Regeln in einer nicht unterstützten Media Query lösen den zweiten Fall nicht. Dort helfen eine bewusst vereinfachte Gestaltung und ein im betreffenden Programm getesteter Grundzustand. Das Beispiel zeigt den Ansatz, keinen universellen Outlook- oder Gmail-Fix.
Logos, Bilder und Buttons richtig vorbereiten
| Element | Problem im dunklen Modus | Was hilft? |
|---|---|---|
| Dunkles Logo mit Transparenz | Verschwindet vor dunklem Hintergrund | Für das E-Mail-Logo eine bewusst gestaltete helle Fläche oder passende Kontur vorsehen und real testen. |
| Heller Text in einem Bild | Bild bleibt hell, Umgebung wird dunkel oder umgekehrt | Wichtige Aussagen als echten HTML-Text setzen; Bild und Rand zusammen prüfen. |
| CTA mit Bildbeschriftung | Text ist ohne Bild nicht verfügbar | Beschriftung als Textlink bauen und Kontrast in beiden Zuständen prüfen. |
| Dünne Rahmen | Werden nach Farbumrechnung kaum sichtbar | Gruppierung nicht allein durch einen feinen Farbrand erklären. |
| Transparente Produktbilder | Dunkle Details verlieren ihre Kontur | Eine zum Motiv passende Bildfläche testen. Transparenz ist nicht für jedes Motiv die beste Wahl. |
Wechselbilder ausschließlich per CSS sind eine Ergänzung für gezielt getestete Programme. Die Botschaft darf nicht davon abhängen, dass eine bestimmte App das richtige Bild auswählt. Für einen rein dekorativen Hintergrund brauchen Sie keinen langen Alternativtext. Ein inhaltlich wichtiges Bild braucht eine verständliche Alternative.
So organisieren Sie einen aussagekräftigen Test
- Die fertige Nachricht aus dem Versanddienst versenden. Eine Browseransicht des HTML zeigt nicht die Verarbeitung des Mailprogramms.
- Je wichtiger Empfängeroberfläche hellen und dunklen Modus prüfen. Zusätzlich das Laden von Bildern abschalten.
- Überschrift, Fließtext, Links, Buttons, Logo und Pflichtangaben kontrollieren. Nichts darf allein über Farbe erklärt werden.
- Text vergrößern und einen schmalen Bildschirm testen. Lange Produktnamen und reale Personalisierungswerte verwenden.
- Klickziele und Antwortweg prüfen. Screenshots mit App-Version und Datum speichern.
Legen Sie vorab fest, was bestehen muss: Inhalt lesbar, Hauptaktion erkennbar, keine abgeschnittenen Texte und kein unsichtbares Logo. Eine identische Darstellung in jedem Mailprogramm ist dafür nicht erforderlich. Wenn ein Sonderfall viel CSS benötigt, ist eine einfachere Gestaltung oft die stabilere Lösung.