E-Mail-Vorschau im Dark Mode

Mail-Apps fragen nicht, bevor sie Ihre Nachricht im Dark Mode umfärben, und sie sind sich untereinander nicht einig, wie das geht. Fügen Sie Ihr HTML ein, um die drei Verhaltensweisen nebeneinander zu sehen und herauszufinden, was schwer lesbar wird.

So kommen Sie an das HTML: Mailchimp, Brevo, Constant Contact und ähnliche Dienste bieten „Als HTML exportieren“ oder „Code anzeigen“. Für eine Signatur klicken Sie in unserem Signatur-Generator auf „HTML-Code kopieren“. In Gmail öffnen Sie eine empfangene Nachricht und wählen „Original anzeigen“, um ihren Quelltext zu sehen.

Ihr Code bleibt in diesem Browser und wird nicht hochgeladen. Die Vorschauen laufen in abgeschotteten Frames ohne Skripte. Bilder werden von ihren eigenen URLs geladen, so wie es ein Mailprogramm tun würde.

Drei Verhaltensweisen, nicht ein Dark Mode

Auf einer Website entscheiden Sie, wie der Dark Mode aussieht. Bei E-Mails entscheidet das Leseprogramm für Sie, und jede Programmfamilie geht dabei auf ihre eigene Art vor.

VerhaltenTypische AppsWas es tut
Keine ÄnderungApple Mail, Outlook für Mac, Gmail im BrowserIhre Farben bleiben. Das Fenster um die Nachricht ist dunkel, und die Nachricht selbst ändert sich nur, wenn sie eigene Dark-Mode-Stile mitbringt.
Teilweise InvertierungOutlook.com, Outlook und Gmail unter Android, Outlook auf dem iPhoneHelle Hintergründe werden abgedunkelt und dunkler Text aufgehellt. Bereiche, die schon dunkel waren, bleiben unberührt.
Vollständige InvertierungGmail auf dem iPhone, klassisches Outlook für WindowsJede Farbe wird umgekehrt, auch dunkle Hintergründe, die hell werden.

Eine Nachricht hat also vier Ansichten: das helle Original plus diese drei. Die Seite zeigt alle vier in Desktop- oder Smartphone-Breite.

Wie die Vorschauen entstehen

Das Tool schreibt jede Farbe um, die es in Ihrem HTML findet, ob sie in einem Inline-Attribut style, in einem <style>-Block oder in einem alten Attribut wie bgcolor steht. Jede Farbe wird in Farbton, Sättigung und Helligkeit umgerechnet. Der Farbton bleibt, die Helligkeit ändert sich.

  • Teilweise Invertierung: Ein Hintergrund mit einer relativen Leuchtdichte über 0,35 wird dunkel. Text und Rahmen in der dunkleren Hälfte der Skala werden hell. Alles andere bleibt, wie es ist.
  • Vollständige Invertierung: Die Helligkeit wird für jede Farbe gespiegelt, Weiß wird also fast schwarz und Schwarz fast weiß.
  • Keine Änderung: Nichts wird umgeschrieben. Deklariert die Nachricht color-scheme mit dark, werden ihre Regeln unter @media (prefers-color-scheme: dark) eingeschaltet. Eine Nachricht, die gar keine Farben setzt, bekommt den dunklen Standardhintergrund der App.

Regeln, die für Outlook.com mit den Selektoren [data-ogsc] und [data-ogsb] geschrieben sind, werden in der teilweisen Vorschau angewendet. Jede Vorschau läuft in einem abgeschotteten Rahmen, in dem keine Skripte ausgeführt werden können.

Was die Befunde bedeuten

Zu wenig Kontrast
In jeder Variante ordnet das Tool jedem sichtbaren Text den nächstgelegenen Hintergrund dahinter zu und berechnet das Kontrastverhältnis. Paare unter 4,5:1 werden aufgelistet, die schlimmsten zuerst. Unter 3:1 wird der Modus als Fehler markiert. Versteckter Preheader-Text wird übersprungen.
Mittelgrauer Text
Ein Grau mit wenig Sättigung und einer Helligkeit zwischen 45 und 70 Prozent liegt in der Mitte der Skala. Invertieren Sie es, und Sie erhalten fast dasselbe Grau, nur jetzt auf dem umgekehrten Hintergrund. Verwenden Sie #555555 oder dunkler für Nebentext.
Dunkles Logo auf transparentem Hintergrund
Das Tool lädt bis zu 15 Bilder und untersucht ihre Pixel. Sind die meisten deckenden Pixel sehr dunkel und die Ränder transparent, wird das Logo mit einem dunklen Hintergrund verschmelzen. Ein Bild auf deckend weißem Hintergrund wird ebenfalls gemeldet, weil es als weißer Kasten erscheinen wird.
Transparenz prüfen
Der Server des Bildes hat einer anderen Website nicht erlaubt, seine Pixel zu lesen. Sie müssen sich die dunklen Vorschauen selbst ansehen.
Dark-Mode-Einstellungen
Gibt an, ob die Nachricht Unterstützung für den Dark Mode deklariert und ob sie dunkle Farben mitliefert. Unterstützung zu deklarieren, ohne Farben mitzuliefern, ist schlimmer, als gar nichts zu deklarieren.
Bilder und Text
Eine Nachricht mit weniger als 120 Zeichen echtem Text besteht vor allem aus Bildern, und Text in Bildern passt sich nie an. Fehlende alt-Attribute werden gezählt.

Lösungen, die in jeder App halten

Beginnen Sie mit den Entscheidungen, die keinen Code brauchen. Verwenden Sie starke Paare, also sehr dunklen Text auf sehr hellem Hintergrund oder umgekehrt, denn Mitteltöne sind das, was die Invertierung ruiniert. Geben Sie einem dunklen Logo eine weiße Kontur von zwei oder drei Pixeln, oder setzen Sie es in der Bilddatei auf eine weiße abgerundete Fläche. Lassen Sie Wörter als HTML-Text stehen.

Für einen Newsletter können Sie dann eigene dunkle Stile für die Apps hinzufügen, die sie beachten:

<meta name="color-scheme" content="light dark">
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    .card { background-color: #1e1e1e !important; }
    .body-text { color: #f2f2f2 !important; }
  }
</style>

Eine Signatur hat diese Möglichkeit nicht. Der Editor, in den Sie sie einfügen, entfernt <meta> und <style>, und Ihnen bleiben klare Farben und ein Logo, das auf beiden Hintergründen funktioniert. Unser E-Mail-Signatur-Generator kann sein Ergebnis direkt an diese Seite schicken.

Das ist eine Simulation auf Grundlage beobachteten Verhaltens. Die echten Umfärberegeln sind nicht veröffentlicht und ändern sich mit App-Updates. Nehmen Sie ein sauberes Ergebnis als gutes Zeichen und schicken Sie dann eine Testnachricht an ein Smartphone und einen Computer im Dark Mode.

Häufige Fragen

Warum sieht meine E-Mail im Dark Mode anders aus?

Die Mail-App des Lesers hat Ihre Farben geändert. Manche Apps dunkeln helle Hintergründe ab und hellen dunklen Text auf, manche kehren jede Farbe um, und manche ändern nichts. Was Sie bekommen, hängt von der App ab, nicht von Ihrem Design.

Kann ich verhindern, dass Gmail die Farben meiner E-Mail invertiert?

Nein. Gmail gibt Absendern keinen Schalter zum Abmelden, und seine Mobil-Apps ignorieren Dark-Mode-Media-Queries. Sie können aber eine Nachricht gestalten, die auch invertiert lesbar bleibt, mit starkem Kontrast, ohne Mittelgrau und mit einem Logo mit heller Kontur.

Warum ist mein Logo im Dark Mode verschwunden?

Wahrscheinlich ist es ein dunkles Logo, das mit transparentem Hintergrund gespeichert wurde. Die App hat das Weiß dahinter durch fast Schwarz ersetzt, und Dunkel auf Dunkel sieht niemand. Fügen Sie dem Bild eine weiße Kontur oder eine weiße Fläche hinzu, oder liefern Sie eine helle Version für den Dark Mode.

Welche Mail-Apps unterstützen prefers-color-scheme?

Apple Mail auf Mac, iPhone und iPad sowie Outlook für Mac wenden es an. Gmail und Outlook für Windows nicht, und Outlook.com verwendet eigene [data-ogsc]-Selektoren. Ihre dunklen Stile verbessern die Lage für einen Teil der Leser. Alle erreichen sie nicht.

Was bewirkt das Meta-Tag color-scheme in einer E-Mail?

<meta name="color-scheme" content="light dark"> sagt der App, dass die Nachricht beide Modi selbst handhabt. Apps, die es beachten, verwenden dann Ihre dunklen Stile. Fügen Sie es nur zusammen mit einem prefers-color-scheme-Block ein, der die dunklen Farben setzt.

Wird das eingefügte HTML hochgeladen?

Nein. Das Umschreiben der Farben und die Prüfungen laufen in Ihrem Browser. Nur die Bilder, auf die Ihr HTML verweist, werden von ihren eigenen Adressen angefordert, so wie jede Mail-App sie abrufen würde.

Verwandte Checks