Die Unterstützung für Dark-Mode-Stile ist bei E-Mail-Clients auf Apple Mail unter iOS/MacOS beschränkt. Dark-Mode-Anpassungen funktionieren also nicht in anderen Clients wie Gmail, Outlook usw. Behalte das im Hinterkopf und gestalte deine E-Mails nach dem Prinzip der progressiven Verbesserung.
Video-Tutorial: Dark-Mode-Stile zu HTML-E-Mail-Designs hinzufügen
Dieses Video zeigt, wie du deinen E-Mail-Designs eigene Dark-Mode-Anpassungen hinzufügst, um mit dem Emailify-Plugin produktionsreife, responsive HTML-E-Mails aus Figma zu exportieren.
Wichtige Designaspekte für den Dark Mode
Die Unterstützung für Dark-Mode-Stile ist bei E-Mail-Clients auf Apple Mail unter iOS/MacOS beschränkt. Dark-Mode-Anpassungen funktionieren also nicht in anderen Clients wie Gmail, Outlook usw. Behalte das im Hinterkopf und gestalte deine E-Mails nach dem Prinzip der progressiven Verbesserung.
Weil jeder E-Mail-Client den Dark Mode anders umsetzt, ist das Design dafür sehr knifflig. Es lohnt sich aber, mit den (oft fürchterlichen) Änderungen zu arbeiten, die jeder E-Mail-Client im Dark Mode automatisch vornimmt.
Als guter Einstieg empfehlen sich Ressourcen wie diese Artikel von CampaignMonitor und Litmus. Sie erklären genau, was die E-Mail-Clients verändern und wie du einige dieser Änderungen im Design abfedern kannst.
Farbanpassungen für den Dark Mode festlegen
Wähle ein Element aus, etwa eine Textebene, ein Bild, einen Button, eine Row, eine Column oder einen Wrapper, und klick dann im Plugin-Header auf den Button Settings. Im Bereich Dark Mode Overrides unten im Settings-Panel legst du Text- und Hintergrundfarben für den Dark Mode fest.
Für Button-, Row-, Column- und Wrapper-Ebenen kannst du außerdem eine Anpassung für Border Color festlegen. Damit änderst du die Rahmenfarbe im Dark Mode, ohne die Rahmenstärke oder den Rahmenstil des Light Mode zu verändern.
Diese Anpassungen werden in den E-Mail-Clients, die diese Funktion unterstützen (Apple Mail unter iOS/MacOS), angezeigt, wenn die E-Mail auf einem Gerät mit aktiviertem Dark Mode geöffnet wird.
Die Unterstützung für Dark-Mode-Stile ist bei E-Mail-Clients auf Apple Mail unter iOS/MacOS beschränkt. Dark-Mode-Anpassungen funktionieren also nicht in anderen Clients wie Gmail, Outlook usw. Behalte das im Hinterkopf und gestalte deine E-Mails nach dem Prinzip der progressiven Verbesserung.
Zwischen zwei Bildebenen im Dark und Light Mode wechseln
Du kannst bestimmte Bildebenen im Dark Mode auch austauschen. Klick dazu auf deine Inhaltsebene in Figma (innerhalb einer Column-Ebene), dann im Plugin-Header auf den Button Settings, und aktiviere entweder den Schalter Only Hide in Dark Mode oder Only Show in Dark Mode – je nachdem, ob die Bildebene in den E-Mail-Clients, die diese Funktion unterstützen (Apple Mail unter iOS/MacOS), auf einem Gerät mit aktiviertem Dark Mode angezeigt oder ausgeblendet werden soll.
Die Unterstützung für Dark-Mode-Stile ist bei E-Mail-Clients auf Apple Mail unter iOS/MacOS beschränkt. Dark-Mode-Anpassungen funktionieren also nicht in anderen Clients wie Gmail, Outlook usw. Behalte das im Hinterkopf und gestalte deine E-Mails nach dem Prinzip der progressiven Verbesserung.
Den Dark Mode im Plugin in der Vorschau ansehen
Öffne die Vorschau und aktiviere in der Symbolleiste der HTML-Vorschau den Schalter Dark Mode. Mit der Auswahl der Vorschaubreite kannst du dasselbe Dark-Mode-Design weiterhin in Desktop- und Mobilbreite vergleichen. Solange die kombinierte Hybridansicht Desktop & Mobile ausgewählt ist, steht Dark Mode nicht zur Verfügung.
Die lokale Vorschau nutzt eine allgemeine automatische Dark-Mode-Behandlung und aktiviert die prefers-color-scheme-Stile der E-Mail. Ihre Farbanpassungen dienen als grobe Orientierung und bilden keinen bestimmten E-Mail-Client nach. Enthält die E-Mail Dark-Mode-Anpassungen von Emailify, kannst du mit dem benachbarten Schalter Overrides deren explizite Stile für Hintergrund, Text, Rahmen und Bildwechsel ein- oder ausblenden.
Der Schalter ist eine Designhilfe, kein Client- oder Geräte-Emulator. Er bildet weder Sanitizer angemeldeter Konten noch native Rendering-Engines und Schriften, App-Oberflächen, die Verarbeitung beim Versand oder alle Unterschiede zwischen Clients und Versionen nach.
Deine E-Mails im Dark Mode testen
Video-Tutorial: HTML-E-Mails aus Figma im Dark Mode testen
Dieses Video zeigt, wie du aus Figma exportierte HTML-E-Mails mit dem Emailify-Plugin und Litmus.com im Dark Mode testest.
Es lohnt sich immer, deine E-Mails vor dem Versand mit einem Dienst wie Litmus oder Email on Acid zu testen, damit sie gut aussehen.
Die Unterstützung für Dark-Mode-Stile ist bei E-Mail-Clients auf Apple Mail unter iOS/MacOS beschränkt. Dark-Mode-Anpassungen funktionieren also nicht in anderen Clients wie Gmail, Outlook usw. Behalte das im Hinterkopf und gestalte deine E-Mails nach dem Prinzip der progressiven Verbesserung.
Du kannst Einstellungen auf mehrere Ebenen anwenden, indem du Settings öffnest und dann in Figma mehrere Emailify-Ebenen desselben Typs auswählst. Jede Einstellung, die du änderst, wird auf alle ausgewählten Ebenen angewendet.