Dark Mode im E-Mail-Design: Alles, was du wissen musst (inkl. typischer Fehler)

Frank
1. Januar 2026

Immer mehr Menschen lesen E-Mails im Dark Mode. Für Empfänger ist das angenehm, für Newsletter-Design manchmal… sagen wir: wie ein Spaziergang an der Nordsee bei Windstärke 9. Wenn du Dark Mode ignorierst, kann dein Layout plötzlich ganz anders aussehen: Logos verschwinden, Hintergründe kippen, Icons werden “komisch”.

In diesem Artikel lernst du:

☑️ wie Dark Mode in E-Mail-Clients grundsätzlich funktioniert
☑️ welche Probleme am häufigsten auftreten
☑️ wie du mit Design-Regeln und etwas CSS gegensteuerst
☑️ warum Testing hier wichtiger ist als Bauchgefühl

Was ist der Dark Mode?

Der Dark Mode (Dunkelmodus, Nachtmodus) dreht die klassische Darstellung um: Aus dunkler Schrift auf hellem Hintergrund wird helle Schrift auf dunklem Hintergrund.

Warum Nutzer ihn mögen:

angenehmer für die Augen, besonders abends
oft stromsparender auf bestimmten Displays
konsistenter Look mit dem Betriebssystem

Warum E-Mail-Designer ihn ernst nehmen müssen:

E-Mail-Clients interpretieren HTML/CSS je nach Client unterschiedlich
manche Clients “inverten” Farben automatisch
Bilder und Borders werden teils unerwartet angepasst
Barrierefreiheit und Kontrast können leiden
Darstellprobleme können immer auch die Zustellbarkeit beeinträchtigen.

Welche E-Mail-Clients unterstützen Dark Mode?

Dark Mode ist heute in den gängigen Betriebssystemen angekommen (macOS, iOS, Windows, Android). In der Praxis begegnet er dir besonders häufig in:

Outlook App
Outlook.com (Webmail)
Gmail App
Apple Mail
Orange Webmail
GMX Mail App

Wichtig: “Unterstützt Dark Mode” heißt nicht automatisch “stellt deine Mail sauber dar”. Das Verhalten unterscheidet sich teils deutlich.

Wie funktioniert Dark Mode in E-Mails?

Vereinfacht gesagt versuchen viele Clients, helle Flächen dunkler zu machen und dunkle Texte heller. Dabei greifen sie je nach Client auf HTML, Inline-Styles und CSS unterschiedlich zu.

Typische Effekte:

Text bleibt manchmal unverändert, wenn er auf einem Hintergrundbild liegt.
Hintergrundfarben werden unterschiedlich behandelt (manche Clients respektieren sie, andere nicht).
CSS wird nicht überall gleich berücksichtigt.
Bilder können verändert wirken, vor allem bei Transparenzen oder sehr hellen Hintergründen.
Borders bleiben teils unverändert, was plötzlich “beißen” kann.

Beispiel

Typische Probleme im Dark Mode

Wenn Dark Mode nicht berücksichtigt wird, entstehen schnell Darstellprobleme, zum Beispiel:

Logo hat zu wenig Kontrast und “verschwindet” optisch
helle Flächen werden grau oder schwarz, aber das Bild bleibt hell
transparente PNGs bekommen unschöne Kanten
Icons kippen farblich oder verlieren ihre Wirkung
Borders sind plötzlich zu hart oder zu schwach

Tipps für E-Mail-Designer und Developer

1) Texte und Hintergründe: Kontrast ist King

Im Dark Mode versuchen Clients, Farben anzupassen. Je weiter du dich von sauberem Schwarz/Weiß entfernst, desto schwerer wird das Verhalten vorherzusagen.

Was hilft:

Kontraste bewusst planen (auch im Dark Mode)
helle Hintergründe nicht “knapp daneben” wählen (z. B. #fdfdfd), sondern konsistent
mit Testing verifizieren, statt zu raten

Du kannst Dark Mode “signalisieren” (wird nicht überall gleich umgesetzt, aber schadet selten in unterstützenden Clients):

				
					<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Und ergänzend per CSS:

				
					:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

2) Bilder: Transparenzen sind oft der Ärgerherd

Wenn sich Hintergrundfarben ändern, sehen transparente Bereiche schnell unsauber aus. Besonders fies:

freigestellte Logos auf hellem Hintergrund
PNGs mit weichen Schatten oder Anti-Aliasing an Kanten

Tipp: Wenn möglich, nutze Grafiken ohne heikle Transparenzen oder gib ihnen einen definierten Hintergrund. Und: baue Logos so, dass sie sowohl auf hell als auch auf dunkel funktionieren (z. B. mit einer dezenten Kontur oder Variante für dunklen Hintergrund).

3) Icons: Gib ihnen eine “Rettungsweste”

Viele unterschätzen: Nicht nur HTML/CSS kann sich ändern, auch Grafiken wirken im Dark Mode anders. Einfarbige Icons sind besonders betroffen.

Praxis-Tipp: Icons mit einer dünnen Umrandung (ca. 2–3 px) sind oft stabiler, weil diese Kontur visuell “zusammenhält”, selbst wenn Farben kippen.

4) Borders und Schatten: Vorsicht, kann plötzlich schräg aussehen

Borders werden im Dark Mode häufig nicht “logisch” angepasst. Das klingt erstmal gut, führt aber zu Problemen:

Border bleibt sehr hell und schreit dich an
Border bleibt sehr dunkel und “verschwindet”
Schatten/Verläufe wirken plötzlich schmutzig

Mein Rat: Borders sparsam einsetzen und lieber mit Abstand, Flächen und klaren Kontrasten arbeiten.

5) Dark-Mode-CSS per Media Query (wo es unterstützt wird)

Für Clients, die prefers-color-scheme unterstützen, kannst du gezielt nachsteuern:

				
					@media (prefers-color-scheme: dark) {
  .card {
    background: #111 !important;
    color: #eee !important;
  }
}

				
					@media (prefers-color-scheme: light) {
  .card {
    background: #fff !important;
    color: #111 !important;
  }
}

Wichtig: Die Unterstützung ist je nach Client und Umgebung unterschiedlich. Insbesondere bei Gmail ist es je nach Oberfläche/Rendering eingeschränkt. Deshalb gilt: testen, testen, testen.

So gehst du pragmatisch vor (ohne dich in Details zu verlieren)

Ist-Zustand prüfen: Wie sieht deine Mail in den wichtigsten Clients im Dark Mode aus?
Top-Probleme fixen: Logo, Kontraste, Bildkanten, Icons, Borders.
Regelmäßig retesten: Dark Mode-Verhalten kann sich durch Client-Updates ändern.
Tools nutzen: Inbox-Preview-Tools (z. B. Email on Acid) sparen dir viele Blindflüge.

Ergänzende Artikel

Fazit

Viele Versender wissen gar nicht, wie ihre E-Mails im Dark Mode wirklich aussehen. Der wichtigste Schritt ist deshalb: erst messen, dann schrauben. Oft reichen kleine Anpassungen an Kontrast, Logos, Icons oder Borders, um große Darstellfehler zu verhindern. Und weil Dark Mode immer verbreiteter wird, lohnt es sich, das Thema fest in deinen Template- und QA-Prozess einzubauen.