Dark Mode Check — email dark mode preview
by Cody
See how your email looks in dark mode, and what disappears, before it goes out.
Installs
0
Likes
0
Users
12
Views
17
Preview
About this plugin
You build an email, it looks right, and then someone opens it in Outlook with dark mode on and the logo is gone. Dark Mode Check shows you that in Figma, while you can still fix it.
Select your email frame and click Preview and check. The plugin draws a copy next to the original, recolored the way dark mode clients recolor HTML, on a dark canvas. Then it tells you:
Which logos and icons disappear, because pictures keep their colors while the background behind them changesWhich pictures will sit in a box, because they have the old background baked inWhich text drops below a readable contrast against its new backgroundTwo behaviors are covered, taken from Litmus's and Email on Acid's dark mode guides, and the plugin shows the date they were last checked:
Partial invert (Outlook on the web, iOS, Android and Mac, and Gmail on Android): light backgrounds go dark, dark text goes light, dark backgrounds stay.
Full invert (Gmail on iOS, Outlook on Windows, Windows Mail): every color flips, dark backgrounds included.
Gmail on the web, Yahoo, AOL and Apple Mail show the email as designed, so there is nothing to preview for them.
Vectors and image fills count as pictures. Filled frames, rectangles and text count as HTML color. If the plugin guesses wrong for a layer, tag it and the plugin follows the tag.
Free:
One behavior at a timeUp to 5 frames per checkThe previews and every checkPaid, $4 a month after a 7-day free trial that starts the first time you run the plugin:
Both behaviors side by sideUnlimited framesCopy a plain-text fix list to paste into your handoffThe plugin runs entirely inside Figma. Image pixels are read inside the plugin window and never leave your file. No network requests, no account.
More accessibility tools plugins
View allStark - Contrast & Accessibility AI Checker
by Stark
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
by Alex Carr
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
by Manthankumar Satani
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥
A11y - Color Contrast Checker
by Kelly Gorr
Text color accessibility