Dark Mode E-Mail-Design: Ein vollständiger Leitfaden
Gestalten Sie E-Mails, die Benutzerpräferenzen respektieren und in dunklen Umgebungen großartig aussehen.
Dark Mode ist für viele Benutzer zur Standardeinstellung geworden. Apple Mail, Gmail, Outlook und die meisten mobilen Clients unterstützen nun Dark Mode. Aber jeder behandelt es anders, was eine komplexe Designherausforderung schafft.
Dieser Leitfaden erklärt, wie E-Mail-Clients Dark Mode anwenden, Techniken zur Steuerung der Darstellung und Teststrategien, um sicherzustellen, dass Ihre E-Mails in hellen und dunklen Umgebungen gut aussehen.
Wie E-Mail-Clients Dark Mode handhaben
E-Mail-Clients verwenden unterschiedliche Ansätze für Dark Mode:
1. Keine Änderung (Benutzersteuerung)
Einige Clients (älteres Gmail Web, einige Outlook-Versionen) ändern die E-Mail-Farben nicht. Ihr Design erscheint wie vorgesehen, unabhängig vom Client-Theme.
2. Partielle Farbumkehrung
Clients wie Apple Mail und iOS Mail kehren Farben intelligent um. Helle Hintergründe werden dunkel. Dunkler Text wird hell. Der Client versucht, die Lesbarkeit zu erhalten.
3. Volle Farbumkehrung
Einige Clients kehren alle Farben aggressiv um. Das kann Probleme mit Bildern, Logos und sorgfältig gestalteten Farbschemata verursachen.
4. Unterstützung für CSS-Media-Queries
Das beste Szenario: Clients, die prefers-color-scheme-Media-Queries unterstützen. Sie können explizite Dark-Mode-Styles bereitstellen.
Der Media-Query-Ansatz
Wo unterstützt, ermöglicht prefers-color-scheme die Definition von Dark-Mode-Styles:
<style>
@media (prefers-color-scheme: dark) {
.body-bg {
background-color: #1a1a1a !important;
}
.text-primary {
color: #ffffff !important;
}
.text-secondary {
color: #b3b3b3 !important;
}
.card {
background-color: #2d2d2d !important;
}
}
</style>Unterstützung Stand 2026:
- Apple Mail (macOS/iOS): Volle Unterstützung
- Outlook (macOS): Volle Unterstützung
- Gmail App (iOS): Partielle Unterstützung
- Outlook App: Begrenzte Unterstützung
- Gmail (web): Keine Unterstützung (verwendet eigenen Algorithmus)
Color-Scheme-Meta-Tag
Hinweis an Clients, dass Ihre E-Mail Dark Mode unterstützt:
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
</head>Dies signalisiert Clients, dass Sie Dark-Mode-Styles bereitgestellt haben. Einige Clients nutzen das, um zu entscheiden, ob sie eigene Farbänderungen anwenden.
Design für automatische Umkehrung
Da Sie nicht alle Clients steuern können, gestalten Sie mit automatischer Umkehrung im Sinn:
Vermeiden Sie reines Weiß (#ffffff)
Rein weiße Hintergründe können zu reinem Schwarz umkehren, was hart wirken kann. Verwenden Sie leichtes Off-White (#f5f5f5) für Haupt-Hintergründe.
Vermeiden Sie reinen Schwarzen Text (#000000)
Rein schwarzer Text kann zu reinem Weiß umkehren. Verwenden Sie stattdessen dunkles Grau (#333333). Es kehrt zu einem weicheren Hellgrau um.
Verwenden Sie transparente PNG-Logos
Logos mit transparentem Hintergrund passen sich besser an. Wenn Ihr Logo dunkel ist, stellen Sie eine helle Version für Dark Mode bereit:
<style>
@media (prefers-color-scheme: dark) {
.logo-light {
display: none !important;
}
.logo-dark {
display: block !important;
}
}
</style>
<img class="logo-light" src="logo-dark.png" alt="Logo">
<img class="logo-dark" src="logo-light.png" alt="Logo" style="display: none;">Fügen Sie Polsterung/Rahmen zu Bildern hinzu
Bilder mit transparentem Hintergrund können auf dunklen Hintergründen verschwinden. Fügen Sie dezente Rahmen oder Hintergründe hinzu:
<img src="icon.png"
style="background-color: #ffffff; padding: 8px; border-radius: 4px;"
alt="Symbol">Button-Design für Dark Mode
Buttons müssen in beiden Modi funktionieren:
<!-- Use mid-range colors that work in both modes -->
<table role="presentation">
<tr>
<td style="background-color: #007bff; border-radius: 4px;">
<a href="..."
style="color: #ffffff; padding: 12px 24px; display: block; text-decoration: none;">
Primary Button
</a>
</td>
</tr>
</table>Vermeiden Sie sehr helle Button-Hintergründe (sie können zu dunkel mit hellem Text umkehren). Mittelstarke Brand-Farben funktionieren typischerweise in beiden Modi.
Dark Mode testen
Manuelles Testen
Testen Sie im echten Dark Mode:
- Aktivieren Sie Dark Mode auf Ihrem Gerät
- Senden Sie Test-E-Mails an mehrere Konten
- Überprüfen Sie in Apple Mail, Gmail, Outlook
- Testen Sie mobil und desktop
Automatisiertes Testen
Litmus und Email on Acid bieten Dark-Mode-Vorschauen. Sehen Sie, wie Ihre E-Mail in Clients in hellen und dunklen Modi dargestellt wird.
Dark Mode in E-Mail-Buildern
Einige E-Mail-Builder handhaben Dark Mode automatisch. Sequenzy und ähnliche Plattformen generieren E-Mails mit Dark-Mode-Berücksichtigung. Die Vorlagen sind in beiden Modi getestet.
Wenn Sie ein Framework wie MJML verwenden, müssen Sie Dark-Mode-Styles manuell hinzufügen. Das Framework kompiliert Ihr Markup, fügt aber prefers-color-scheme-Queries nicht automatisch hinzu.
Praktische Strategie
Aufgrund der Komplexität hier ein praktischer Ansatz:
- Zuerst für Light Mode designen mit Farben, die sich vernünftig umkehren
- Extreme vermeiden (reines Weiß, reines Schwarz)
- Media-Queries hinzufügen für Clients, die sie unterstützen
- Meta-Tags verwenden, um Dark-Mode-Unterstützung zu signalisieren
- In Haupt-Clients testen und akzeptieren, dass etwas Variation unvermeidbar ist
Wann Dark Mode ignorieren
Nicht jede E-Mail braucht perfekte Dark-Mode-Unterstützung. Transaktionale E-Mails (Belege, Passwort-Resets) sind wichtiger als Promotions. Konzentrieren Sie sich auf Bereiche mit dem größten Impact.
Einige brandlastige Designs sehen besser aus, wenn sie Light Mode erzwingen. Das ist eine valide Wahl, wenn Ihre Brand-Identity auf spezifischen Farbkombinationen basiert.
Das Wichtigste in Kürze
Dark Mode in E-Mails ist ein bewegliches Ziel. Client-Verhalten variiert und entwickelt sich weiter. Gestalten Sie flexibel, testen Sie über Clients hinweg und akzeptieren Sie, dass etwas Variation unvermeidbar ist.
Der sicherste Ansatz: Farben verwenden, die sich bei Umkehrung vernünftig verhalten, Media-Queries für Feinkontrolle wo unterstützt hinzufügen und vor dem Versand testen. Tools wie Sequenzy mit integrierter Dark-Mode-Berücksichtigung reduzieren die manuelle Arbeit.