Dark Mode in HTML-E-Mails: Was Clients tun und wie Sie gegensteuern

Kurz gesagt: Gestalten Sie die E-Mail so, dass sie auch dann funktioniert, wenn der Client ihre Farben selbst umrechnet, und nutzen Sie prefers-color-scheme nur als Feinschliff für die Clients, die es verstehen. Wer sich auf die Media Query allein verlässt, lässt nach den Zahlen von caniemail mehr als die Hälfte der Postfächer ungeschützt.

Drei Arten, wie Clients mit dunklen Farben umgehen

Es gibt nicht „den“ Dark Mode in E-Mails, sondern mindestens drei Verhaltensmuster, die sich je nach Client und Version unterscheiden:

• Ihre Farben bleiben unangetastet. Der Client zeigt die E-Mail so, wie Sie sie gebaut haben, und umgibt sie höchstens mit einem dunklen Rahmen.
• Der Client rechnet nur helle Flächen um. Weiße Hintergründe werden dunkel, dunkle Schrift wird hell, bereits dunkle Elemente bleiben meist, wie sie sind.
• Der Client kehrt nahezu alles um. Das trifft auch Markenfarben, Buttons und manchmal Bilder, und genau hier entstehen die unschönen Ergebnisse.

Welcher Client welches Muster zeigt, ändert sich mit Updates. Statt sich auf Listen aus Blogartikeln zu verlassen, lohnt der Blick in die laufend gepflegte Tabelle von caniemail.

Was die Zahlen sagen

Auf der Seite zu @media (prefers-color-scheme) schätzt caniemail die Unterstützung auf 41,86 Prozent. Auf der Seite zur CSS-Eigenschaft color-scheme steht eine geschätzte Abdeckung von 16,28 Prozent (13,95 Prozent vollständig, 2,33 Prozent teilweise), und für einen Webmail-Client ist sie als fehlerhaft markiert, weil das Webmail der Regel ein Präfix voranstellt. Beides zusammen führt zu einer nüchternen Regel: Dark-Mode-CSS ist ein Bonus für etwa vier von zehn Lesern, kein Fundament.

Für Outlook vermerkt caniemail außerdem, dass im Dark Mode zusätzliche Attribute wie data-ogsc und data-ogsb gesetzt werden. Das nutzen viele Vorlagen, um Outlook gezielt anzusprechen.

Der Media-Query-Ansatz

Wo prefers-color-scheme ankommt, steuern Sie Hintergründe, Schriftfarben und Logos direkt. Vergeben Sie dafür Klassen im HTML und überschreiben Sie die Inline-Werte mit !important:

<style>
  @media (prefers-color-scheme: dark) {
    .seite    { background-color: #16181d !important; }
    .karte    { background-color: #23262e !important; }
    .text     { color: #e8eaed !important; }
    .text-sek { color: #aab0ba !important; }
  }
  /* Outlook.com und Outlook-Apps setzen im Dark Mode data-ogsc / data-ogsb */
  [data-ogsc] .text { color: #e8eaed !important; }
  [data-ogsb] .karte { background-color: #23262e !important; }
</style>

Der Block darf nur Verbesserungen enthalten. Wenn er in einem Client ignoriert wird, muss die E-Mail ohne ihn lesbar sein.

Meta-Tag und color-scheme: sinnvoll, aber kein Ersatz

Mit dem Meta-Tag und der gleichnamigen CSS-Eigenschaft teilen Sie Clients mit, dass Ihre E-Mail beide Modi kennt. Wie stark ein Client darauf reagiert, unterscheidet sich von Fall zu Fall, deshalb gehört die Deklaration in jeden Test.

<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>

Ein Haken: Wenn Sie „light dark“ deklarieren, übernehmen Sie die Verantwortung dafür, dass beide Varianten gut aussehen. Wer keine dunklen Styles liefert, sollte den Hinweis weglassen und lieber die Umkehr dem Client überlassen.

Farben, die eine Umkehr überstehen

Da Sie das Verhalten des Clients nicht steuern, wählen Sie Farben, die in beide Richtungen kippen können:

• Reines Weiß und reines Schwarz meiden. Ein helles Grau wie #f5f5f5 als Fläche und ein dunkles wie #2b2b2b für Text werden in der Umkehr zu weicheren Gegenstücken statt zu hartem Schwarz-auf-Weiß.
• Mittlere Markenfarben für Buttons nutzen. Sehr helle Buttonflächen kippen leicht ins Dunkle und nehmen dabei die Kontrastwirkung der Beschriftung mit.
• Text immer als Text setzen. Eine Überschrift in einem Bild kann der Client nicht umfärben, sie bleibt dunkel auf dunklem Grund.

Logos und Bilder

Das Logo ist der häufigste Schadensfall. Die sicherste Lösung ist ein PNG mit transparentem Hintergrund und einem dünnen hellen Rand, das auf beiden Untergründen funktioniert. Wo Sie zwei getrennte Varianten brauchen, tauschen Sie sie per Media Query aus und lassen die helle Variante als Standard stehen:

<style>
  .logo-dunkel { display: none !important; }
  @media (prefers-color-scheme: dark) {
    .logo-hell   { display: none !important; }
    .logo-dunkel { display: block !important; }
  }
</style>
<img class="logo-hell" src="logo-auf-hell.png" width="140" alt="Muster GmbH">
<img class="logo-dunkel" src="logo-auf-dunkel.png" width="140" alt="Muster GmbH" style="display:none;">

Prüfen Sie in jedem Ziel-Client, dass nicht beide Logos gleichzeitig erscheinen oder keines von beiden. Bei Produktbildern und Icons mit transparentem Hintergrund hilft eine neutrale Fläche, etwa ein weißer Hintergrund mit etwas Innenabstand, damit sie nicht im dunklen Grund verschwinden.

Dark Mode mit MJML und anderen Frameworks

Kein Framework ergänzt Dark-Mode-Regeln von selbst. In MJML schreiben Sie sie in einen mj-style-Block im mj-head und vergeben die Klassen über das Attribut css-class an die Komponenten. Das gilt auch für React Email und Maizzle: Der Compiler liefert HTML, die Entscheidung über die Farben liegt bei Ihnen. Einen Vergleich beider Ansätze finden Sie unter MJML und React Email im Vergleich.

<mj-head>
  <mj-style>
    @media (prefers-color-scheme: dark) {
      .karte { background-color: #23262e !important; }
    }
  </mj-style>
</mj-head>
<mj-body>
  <mj-section css-class="karte"> ... </mj-section>
</mj-body>

Testen in der Praxis

1. Versenden Sie die E-Mail über Ihre echte Absenderdomain an Testkonten bei Gmail, Outlook.com und Apple Mail.
2. Schalten Sie das Systemthema um und öffnen Sie dieselbe Nachricht in beiden Zuständen.
3. Prüfen Sie Logo, Buttons, Trennlinien und Bilder getrennt, nicht nur den Gesamteindruck.
4. Schalten Sie in einem Client das Laden von Bildern ab und sehen Sie nach, ob der Alt-Text auf dunklem Grund lesbar bleibt.

Die Grundlagen zu Clients und Rendering finden Sie im Leitfaden zur Client-Kompatibilität, die Spaltenlogik für schmale Bildschirme im Artikel zum responsiven E-Mail-Design und Hinweise zu Kontrasten in der Anleitung zur Barrierefreiheit.

Wann Sie den Dark Mode getrost vernachlässigen

Nicht jede Vorlage verdient denselben Aufwand. Investieren Sie zuerst in Mails, die jede Person bekommt und die etwas Wichtiges enthalten: Bestätigungen, Rechnungen, Passwort-Zurücksetzungen. Ein selten versendeter Rundbrief mit einem Foto als Kopf kann ruhig etwas ungeschliffen im dunklen Modus erscheinen, solange nichts unlesbar wird. Und wenn Ihre Marke von einer festen Farbkombination lebt, ist ein sauberes helles Design mit eigener Kartenfläche eine legitime Entscheidung.