Wie geht man mit dem dark Mode um?

Zugegeben: Designs für Newsletter zu entwickeln ist nicht ganz trivial. Es gibt hier viele Dinge zu beachten, wenn das Mailing auf den unterschiedlichen Mail-Programmen und in verschiedenen Konstellationen korrekt dargestellt werden soll.

Dabei wird jedoch auf eine Besonderheit der letzten Jahre gerne vergessen: Den Dark Mode.

Was ist der dark Mode?

Auf einigen Mail-Programmen, insbesondere Smartphones, kann der User einen „dark mode“ aktivieren (auch als „dark theme“ o.ä. bekannt). Diese Einstellung kann global erfolgen oder auch zeitlich befristet sein (zum Beispiel nur während der Nachtstunden).

Dabei stellt das Betriebssystem (oder auch nur das Mail-Programm) den Hintergrund vieler Oberflächen in dunklen Farben dar.

Der Hauptgrund: In dunklen Umgebungen – wie beispielsweise in der Nacht oder einem abgedunkeltem Raum – ist ein dunkler Hintergrund für das Auge wesentlich angenehmer. Und darüber hinaus wird auch der Akku geschont.

Wieso spielt das für Newsletter eine Rolle?

Für Newsletter hat der dark mode eine direkte Konsequenz. Helle Hintergründe werden in einigen Smartphones dunkel dargestellt.

Das kann dazu führen, dass beispielsweise ein schwarzes transparentes Logo auf einem weißen Hintergrund plötzlich faktisch unsichtbar wird – wenn nämlich plötzlich das schwarze Logo auf einem schwarzen Hintergrund dargestellt wird.

Welche Mail-Programme unterstützen den dark mode?

Lange nicht alle Mail-Programme bieten diese Funktion an, aber doch einige. Zu den wichtigsten Anbietern gehören Apple (Apple Mail, iPhone Mail, iPad Mail), Windows 2019, Gmail, Outlook.com und ein paar weitere.

Wie die Mail-Programme mit dem dark mode umgehen, ist leider höchst unterschiedlich. Manche ändern nur die Farben der Applikation, nicht aber des Mails selber; andere wenden eine andere (dunklere) Farbpalette an; wieder andere invertieren bestimmte Elemente.

Je nach Layout und Mail-Programm kann das Resultat zufriedenstellend aussehen – oder es zerstört das Design Ihres Newsletters.

Ein weisser Rahmen ist (eine) Lösung

Es gibt einen relativ simplen Trick, mit dessen Hilfe man das Problem mit „schwarzes Logo auf schwarzem Hintergrund“ lösen kann: Man zeichnet einen Rahmen in weiss (bzw. der Hintergrundfarbe) rund um das (dunkle) Logo und lässt den Rest transparent.

Auf dem hellen Hintergrund ist dieser Rahmen nicht sichtbar; doch auf einem dunklen Hintergrund sieht man den Rahmen rund um das Logo und damit hebt es sich entsprechend ab.

Falls das für Ihr Logo keine sinnvolle Lösung ist: Hier schaffen die media queries (siehe unten), mit deren Hilfe man unterschiedliche Logo-Versionen für den light und den dark mode anzeigen lassen kann.

Kann man die Farben für den dark mode gezielt ansteuern?

Ja und nein. ;-)

Zuerst die gute Nachricht: Es gibt ein media query, über das man gezielt die Darstellung des Mailings im dark mode ansteuern kann, um zum Beispiel andere Farben zu definieren.

Der Befehl dafür lautet:
@media (prefers-color-scheme: dark)

in Kombination mit den beiden Meta-Tags
<meta name=“color-scheme“ content=“light dark“>
<meta name=“supported-color-schemes“ content=“light dark“>

Die schlechte Nachricht: Leider unterstützen nicht alle Mail-Programme diesen Befehl (richtig erraten: Outlook zum Beispiel). Er funktioniert also manchmal, aber nicht überall. Ja, das ist ärgerlich, aber so ein Verhalten ist dem geplagten E-Mail Designer ja leider nur allzu gut bekannt.

Schaden können diese „dark mode Styles“ übrigens jedoch nicht; im worst case werden sie ignoriert.

Empfehlungen und Tipps

Für den Umgang mit der Newsletter-Darstellung im dark mode haben wir auf Basis unserer Erfahrungen einige Empfehlungen für Sie zusammengestellt:

• Analysieren Sie, welche Mail-Programme Ihre Zielgruppe verwendet. Je nach Anteil sind Sie von dem dark mode mehr oder weniger (vielleicht auch kaum) betroffen.
• Wichtig: Sehen Sie sich Ihren eigenen Newsletter auf unterschiedlichen Mail-Programmen im dark mode an! So erkennen Sie gleich, ob und bei welchen Elementen eventuell Handlungsbedarf besteht.
• Verwenden Sie eigene Styles für den dark mode (mit dem media query): Auch wenn das nicht überall funktioniert, so ist es besser als nichts – und schaden kann es auf keinen Fall.
• Passen Sie Grafiken entsprechend an, das gilt insb. für das Logo. Bilder sollten mit Transparenzen arbeiten und auf unterschiedlichen funktionieren.

Ja, das ist wieder eine Besonderheit, an die ein Designer denken sollte. Doch der Aufwand dafür ist durchaus überschaubar – und man kann so vermeiden, dass ein Newsletter bei manchen Empfängern gar grauenvoll aussieht.