The support for dark mode override styles in email clients is limited to Apple Mail on iOS/MacOS; which means dark mode overrides will not work on any other clients like Gmail, Outlook etc. Please be aware of this and try to design your emails with the progressive enhancement in mind.
Video Tutorial: Add dark mode styles to HTML email designs
This video walks through how to add custom dark mode style overrides to your email designs for exporting production-ready, responsive HTML emails from Figma using the Emailify plugin.
Important design considerations for dark mode
The support for dark mode override styles in email clients is limited to Apple Mail on iOS/MacOS; which means dark mode overrides will not work on any other clients like Gmail, Outlook etc. Please be aware of this and try to design your emails with the progressive enhancement in mind.
Due to each email client having their own implementation, dark mode is very tricky to design for, but it's worth trying to work with the (often terrible) changes that each email client automatically applies in dark mode.
It's a good idea to check out some resources (like these articles from CampaignMonitor and Litmus) that go through exactly what these email clients are changing and how to mitigate some of those changes in the design as good starting points.
Applying dark mode color overrides
Select an element such as a text layer, image, Button, Row, Column, or Wrapper, then click the Settings button in the plugin header. You can set dark mode text and background colors in the Dark Mode Overrides section at the bottom of the Settings panel.
For Button, Row, Column, and Wrapper layers, you can also set a Border Color override. This changes the border color in dark mode without changing the border width or style used in light mode.
These overrides will be shown on the email clients that support this feature (iOS/MacOS Apple Mail apps) when the email is being viewed on a device with dark mode enabled.
The support for dark mode override styles in email clients is limited to Apple Mail on iOS/MacOS; which means dark mode overrides will not work on any other clients like Gmail, Outlook etc. Please be aware of this and try to design your emails with the progressive enhancement in mind.
Swapping between two image layers in dark and light mode
You can also swap certain image layers to swap them out on dark mode by clicking your Figma content layer (inside of a Column layer), then clicking the Settings button in the plugin header, and enabling either the Only Hide in Dark Mode or Only Show in Dark Mode toggle depending on if you want the image layer to be shown or hidden on the email clients that support this feature (iOS/MacOS Apple Mail apps) when the email is being viewed on a device with dark mode enabled.
The support for dark mode override styles in email clients is limited to Apple Mail on iOS/MacOS; which means dark mode overrides will not work on any other clients like Gmail, Outlook etc. Please be aware of this and try to design your emails with the progressive enhancement in mind.
Previewing dark mode in the plugin
Open Preview and turn on the Dark Mode switch in the HTML Preview toolbar. Keep using the preview-width selector if you want to compare the same dark mode design at desktop or mobile widths. Dark Mode is unavailable while the combined Desktop & Mobile Hybrid view is selected.
The local preview activates the email's prefers-color-scheme styles. If the email contains Emailify dark mode overrides, use the adjacent Overrides switch to show or hide its explicit background, text, border, and image-swap styles.
The toggle is a design aid, not a client or device emulator. It does not reproduce authenticated sanitizers, native rendering engines and fonts, app chrome, delivery processing, or every client/version difference.
Use the Email Previews tab for release validation against the real dark-mode clients available in the live catalog. See Testing your HTML emails before sending.
Testing your emails in dark mode
Video Tutorial: Test HTML emails in dark mode with exports from Figma
This video walks through how to test HTML emails in dark mode with exports from Figma using the Emailify plugin and Litmus.com.
It's always worth doing a test of your own emails using a service like Litmus or Email on Acid to ensure they're looking good before you send them out.
The support for dark mode override styles in email clients is limited to Apple Mail on iOS/MacOS; which means dark mode overrides will not work on any other clients like Gmail, Outlook etc. Please be aware of this and try to design your emails with the progressive enhancement in mind.
You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.