Wie kann ich mit benutzerdefiniertem CSS das Erscheinungsbild meiner E-Mail im Dunkelmodus anpassen?

Im E-Mail-Editor kannst du mit Benutzerdefiniertes CSS die Farben von Schaltflächen und Abschnitten ändern, den Hintergrund der Nachricht anpassen und Logos im Dunkelmodus sichtbar halten. Außerdem kannst du ausgewählte Farben aus deinem Design für den Hellmodus beibehalten.

Du kannst bei der Erstellung deiner E-Mail mit den grundlegenden Optionen für den Dunkelmodus beginnen. Falls deine Nachricht noch Anpassungen benötigt – zum Beispiel, wenn ein Logo schwer zu erkennen ist oder die Farben der Schaltflächen an Kontrast verlieren –, kannst du das Erscheinungsbild mit benutzerdefiniertem CSS feinabstimmen.

Was brauchst du, bevor du benutzerdefinierte Dark-Mode-Stile hinzufügst?

Du benötigst Zugriff auf Benutzerdefiniertes CSS und Kenntnisse in CSS. Siehe Wie verwende ich die Option Benutzerdefiniertes CSS im E-Mail-Editor?.

Du musst Benutzerdefiniertes CSS für jeden Block aktivieren, den du ansprechen möchtest. Ohne diese Aktivierung wird die CSS-Klasse des Blocks nicht in die versendete E-Mail eingefügt, sodass die benutzerdefinierten Stile nicht angewendet werden. Das gilt auch, wenn du den Code für die gesamte Nachricht hinzufügst.

Benutzerdefiniertes CSS zu einem Block hinzufügen

So bereitest du einen Block vor:

1. Wähle die Schaltfläche, den Abschnitt oder das Bild aus, das du anpassen möchtest.
2. Aktiviere Benutzerdefiniertes CSS hinzufügen im rechten Bereich.
3. Gib im CSS-Feld .elem ein, um die Klasse des ausgewählten Blocks anzuzeigen.
4. Kopiere die Klasse und ersetze damit jedes .elem-ID in deinem ausgewählten Beispiel.

Ersetze beispielsweise .elem-ID durch eine Klasse wie .elem-image-5dc6501190a6. Die Klasse ist für jeden Block unterschiedlich.

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

So änderst du die Farben von Schaltflächen im Dunkelmodus

Füge den folgenden Code zum benutzerdefinierten CSS der Schaltfläche hinzu. Ersetze jedes .elem-ID durch die Klasse der Schaltfläche.

In diesem Beispiel werden in unterstützten E-Mail-Apps ein hellorangefarbener Hintergrund und dunkler Text verwendet.

1/* Stile für den Dunkelmodus für Apps, die diese Medienabfrage unterstützen:
2  einschließlich unterstützter Versionen von Apple Mail, Outlook und Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID table td,
5  .elem-ID a,
6  .elem-ID p {
7    background-color: #FFB27A !important;
 8  }
9
10  .elem-ID a,
11  .elem-ID p {
12    color: #1A1A1A !important;
13  }
14}
15
16/* Zusätzliche Hintergrundregeln für Outlook.com und die Outlook-Apps für Mobilgeräte */
17 [data-ogsb] .elem-ID table td,
18[data-ogsb] .elem-ID a,
19[data-ogsb] .elem-ID p {
20  background-color: #FFB27A !important;
21}
22
23/* Zusätzliche Textregeln für Outlook.com und die Outlook-Apps für Mobilgeräte */
24[data-ogsc] .elem-ID a,
25[data-ogsc] .elem-ID p {
26  color: #1A1A1A !important;
27}

Behalte sowohl den a- als auch den p-Selektor bei. Sie decken Schaltflächen mit und ohne Link ab. Die Regeln, die mit[data-ogsb] und [data-ogsc] beginnen, bieten zusätzliche Unterstützung in einigen Outlook-Apps.

.elem-ID table td,
.elem-ID a,
.elem-ID p {
 background-image: linear-gradient(#FF6600, #FF6600) !important;
}

So änderst du die Farben der Abschnitte im Dunkelmodus

Füge diesen Code zum benutzerdefinierten CSS des Abschnitts hinzu und ersetze jedes .elem-ID durch die Klasse des Abschnitts:

1/* Stile für den Dunkelmodus für Apps, die diese Medienabfrage unterstützen,
2  einschließlich unterstützter Versionen von Apple Mail, Outlook und Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID,
5  .elem-ID > table {
6    background-color: #1E1E1E !important;
7  }
 8
9  .elem-ID div > p,
10  .elem-ID div > h1,
11  .elem-ID div > h2,
12  .elem-ID div > h3,
13  .elem-ID li {
14    color: #F2F2F2 !important;
15  }
16}
17
18/* Zusätzliche Hintergrundregeln für Outlook.com und die Outlook-Apps für Mobilgeräte */
19[data-ogsb] .elem-ID,
20[data-ogsb] .elem-ID > table {
21  background-color: #1E1E1E !important;
22}
23
24/* Zusätzliche Textregeln für Outlook.com und die Outlook-Apps für Mobilgeräte */
25[data-ogsc] .elem-ID div > p,
26[data-ogsc] .elem-ID div > h1,
27 [data-ogsc] .elem-ID div > h2,
28[data-ogsc] .elem-ID div > h3,
29[data-ogsc] .elem-ID li {
30  color: #F2F2F2 !important;
31}

Dieses Beispiel verleiht dem Abschnitt einen dunklen Hintergrund und hellen Text. Es gilt sowohl für Standard- als auch für Abschnitte in voller Breite, während Schaltflächen innerhalb des Abschnitts ihre eigenen Farben behalten.

Spalten mit eigenen Hintergrundfarben benötigen separate Regeln. Textfragmente mit individuell zugewiesenen Farben können möglicherweise weiterhin von der E-Mail-App verarbeitet werden.

So änderst du den Nachrichtenhintergrund im Dunkelmodus

Füge dieses Beispiel zum benutzerdefinierten CSS der gesamten Nachricht hinzu, unterhalb der Einstellungen auf Nachrichtenebene:

1/* Ändere den Nachrichtenhintergrund in Apps, die diese Media-Abfrage unterstützen */
2@media (prefers-color-scheme: dark) {
3  body,
4  .elem-body {
5    background-color: #121212 !important;
 6  }
7}
8
9/* Zusätzliche Hintergrundregel für Outlook.com und die Outlook-Apps für Mobilgeräte */
10[data-ogsb] .elem-body {
11  background-color: #121212 !important;
12}

Dadurch wird der Hintergrund um deine Abschnitte in unterstützten E-Mail-Apps geändert. Abschnitte mit eigenem Hintergrund benötigen eigene Stile.

Lass .elem-body unverändert. Das ist die eigentliche Klasse der Nachricht und kein Platzhalter.

Um den ursprünglichen Nachrichtenhintergrund beizubehalten, ersetze #121212 durch die entsprechende Farbe im Hellmodus. Das verhindert jedoch nicht, dass manche E-Mail-Apps den Hintergrund trotzdem ändern.

So bleibt ein dunkles Logo sichtbar

Ein dunkles Logo mit transparentem Hintergrund kann schwer zu erkennen sein, wenn der Bereich dahinter dunkel wird. Du kannst einen hellen Hintergrund hinter dem Bild hinzufügen.

Füge diesen Code zum benutzerdefinierten CSS des Bildblocks hinzu und ersetze jedes .elem-ID durch die Klasse des Bildblocks:

1/* Einen hellen Hintergrund in Apps hinzufügen, die diese Media-Abfrage unterstützen */
2@media (prefers-color-scheme: dark) {
3  .elem-ID img {
4    background-color: #FFFFFF !important;
 5  }
6}
7
8/* Zusätzliche Hintergrundregel für Outlook.com und die Outlook-Apps für Mobilgeräte */
9[data-ogsb] .elem-ID img {
10  background-color: #FFFFFF !important;
11}
12
13/* Gmail-Apps: Den Hintergrund hinter dem Bild beibehalten.
14  Diese Regel gilt auch im hellen Modus. */
15.elem-ID img {
16  background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
17}

Ersetze #FFFFFF überall durch die Hintergrundfarbe des Abschnitts im hellen Modus. Der Farbverlauf sorgt dafür, dass dieser Hintergrund in Gmail-Apps erhalten bleibt und auch im hellen Modus angezeigt wird.

Ein Bild, das bereits einen einfarbigen Hintergrund hat, wie zum Beispiel ein JPG, benötigt diese Anpassung in der Regel nicht.

@media (prefers-color-scheme: dark) {
 .elem-ID img {
   content: url("https://example.com/logo-dark.png") !important;
 }
}

Warum Stile in verschiedenen E-Mail-Apps unterschiedlich aussehen

E-Mail-Apps handhaben den Dunkelmodus unterschiedlich. Die Kommentare in den Beispielen beschreiben die beabsichtigte Verwendung der jeweiligen Technik; sie garantieren keine Unterstützung in jeder Version einer App.

Was ist, wenn Gmail ein Snippet ignoriert?

Versuche, die Outlook-spezifischen Regeln – also diejenigen, die mit [data-ogsc] oder [data-ogsb] beginnen – in das benutzerdefinierte CSS der gesamten Nachricht zu verschieben und sie dabei von den anderen Regeln des Blocks getrennt zu halten.

Lass das benutzerdefinierte CSS für den betreffenden Block aktiviert und behalte dessen Klasse in jedem Selektor bei.

Fehlerbehebung

Wenn keiner der Stile angewendet wird, überprüfe Folgendes:

• Benutzerdefiniertes CSS bei jedem betroffenen Block aktiviert ist.
• Jedes .elem-ID durch die richtige Blockklasse ersetzt wurde.
• .elem-body in den Hintergrundregeln der Nachricht unverändert geblieben ist.
• Die E-Mail-App des Empfängers die von dir verwendete Technik unterstützt.
• Du die Beispiele nicht mit dem force light mode kombinierst.

Bevor du die Nachricht an deine Liste sendest, teste sie unbedingt.

1. Überprüfe das Design sowohl im hellen als auch im dunklen Modus.
2. Sende Testnachrichten an die E-Mail-Apps und Geräte, die deine Empfänger nutzen.
3. Überprüfe den Textkontrast, die Beschriftungen der Schaltflächen, die Sichtbarkeit des Logos und die Hintergründe um die Abschnitte herum.
4. Stell sicher, dass das ursprüngliche Design auch dort lesbar bleibt, wo benutzerdefinierte Stile nicht unterstützt werden.
5. Wiederhole die Tests, nachdem du Farben oder Bilder geändert hast.

Hinweis: Die Vorschau im Dunkelmodus des Editors gibt nicht das Verhalten jeder E-Mail-App wieder, und benutzerdefiniertes CSS wird in der Standard-Nachrichtenvorschau nicht angezeigt.