How to add dark mode styles to HTML email designs using Emailify

Video Transcript

Today I'm going to be showing you how to add dark mode style overrides to your HTML email designs in Figma using the Emailify Figma plugin.

The first thing we need to do if you haven't already done so, is go to the Figma Community and search for the word "Emailify", and if you hit enter that will pop right up. If you click on the "Install" button on the right-hand side, once it says "Installed", you'll be ready to go.

I'm just going to jump back into my Figma file, and if you haven't already looked at the other Emailify Figma tutorials that we have on YouTube, we've got another tutorial that shows you how to actually design these HTML emails in Figma and export them. This Figma tutorial won't be going over all those details again, and I'm assuming that you've already figured out how to design and export these HTML emails from Figma. This Figma tutorial is just going to be showing you how to add additional dark mode specific style overrides to that email design.

To get started, we just have to right-click anywhere, go down to "Plugins" and click on "Emailify", and this is going to open up the Figma plugin that we just installed. As I said, I've already designed this email in Figma, but if you do want to add more components, or different components, or build your own; again, we do have other tutorials which go through that process. Okay, today we're just going to be looking at dark mode overrides; and what that means is we can actually specifically or choose different colors and overrides or settings for each of these layers and design elements, which will only kick in if the user is using a device to read their emails that's in dark mode.

For example, if I wanted to ensure that this block here didn't come up as this color on dark mode, what I can do is just click on that layer, open up my "Settings" panel and down here at the bottom you'll notice a new section called "Dark Mode Overrides", and this is available on a bunch of different layer types you can apply this to: sections, columns, text layers, button layers, image layers; and you'll see they all have different types of overrides on them. For example, I'll show you what this looks like if we go to this block here and go to this column, we can actually apply a text color override to that column. Instead of being this sort of dark text, I can make it white text. I can put in the hashed HEX value for white text, and to give some contrast I'm going to also override the background color of the row by clicking on the row layer, and putting in a darker background color here; that's in the "Override Background Color" input.

If I close that off and open up the preview by clicking the "Preview" button in the header, that's loaded up an HTML preview of our email, and you can see here that nothing has changed yet; the reason for that is we've got this new toggle up here which is called "Show Dark Mode Overrides", and if I click on that, you can see here it's now triggered that dark mode preview to kick in. Instead of the white background with dark text we've now got a dark background with white text.

What we can do if we want to really tweak this is we can get down into the individual text layers as well, and we can actually override those individual layers on top of the block layer level. If I click on the "Settings" panel while I click on this description text, you can see here I can override that text color even further at that granular level. I'll click on the input and I might make this text just a little bit darker, so I'll make it it's a light gray, and it's going to reload the preview, and now you can see here instead of being white, which is a little bit too much contrast, I've just knocked that back a little bit to make it more of a light gray.

We can go ahead and do this to all of our different elements here, and you'll notice that the image here isn't set up; the reason why that's not showing up is because I'm actually going to show you how to also swap out images. What we can do is if we click on any of our image layers, we can actually hide and show those image layers depending on if they're in dark mode. For example, I've got these two images here that I've created and they're versions of the same image, but one's knocked back a little bit in how bright it is, and the other one's just the regular brightness. What I'm going to do is I'm going to click on the regular brightness image layer, and I've got the toggle set to only hide this layer when dark mode is enabled, so the "Only Hide on Dark Mode" toggle is enabled on the regular brightness layer, and on the paired back brightness layer I've checked the "Only Show in Dark Mode" checkbox.

By default, both of these are turned off, but if I wanted to show both of these at different times, I can do that by toggling these. I'll show you what it looks like without the toggles first, and you can see what it looks like when we turn them back on. I've just turned off those "show" and "hide" toggles, and you can see here it's rendering both the images in dark mode and in non-dark mode, but if I click on the "Settings" panel and only hide the brighter one on dark mode, and only show the darker one on dark mode, if I refresh that preview you'll be able to see that in the regular email mode the brighter version of the image is showing, but if I toggle on dark mode it's overriding that image, so it's swapping out those images. This can be really handy if you're using images, or transparent images which blend into the background. For example, a logo; you could swap out a logo for a dark version or a light version on the different dark and light modes, and that's something that can be really helpful with your designs when you are thinking about dark mode in mind.

Of course, we can go through all of these and change the background colors for all of them; I won't go through every single one, but just to give you a bit more of a feel of what this can look like, I've just swapped out the background color and text color for that section there. Of course, again, we can go down to a granular level and apply those at a per text layer basis, so I might make that description text a little bit duller, and that's going to kick in and just be a little bit less contrast. That's roughly what it looks like to enable the email dark mode style overrides in Figma, and you can apply this to all your different layers, and you can see what that looks like just by toggling it on and off and then tweaking it a little bit more as you go along.

The other thing that's worth noting is that these dark mode overrides will only apply to email clients that support it, so if we look at the caninemail.com website, which is a really good one to check out for what features are supported on different email clients, we can see here at the moment it's supported in across about 25% of all email clients. It's a relatively new feature, and at the moment you've got full support on MacOS and iOS in Apple Mail, you've got some support in different versions of Outlook on MacOS, Outlook.com, and iOS it's all supported. You've got some support with "Hey", the email client from Basecamp, and a couple of other random browsers as well. Be mindful that this is not supported across things like Gmail at the moment; hopefully that gets supported in the future, but for now I would really consider this to be more of a progressive enhancement. I would still try and design the emails to work well under normal dark mode circumstances but this just gives you a little bit of extra design control for those email clients that do support these dark mode specific theme overrides.

That's what that looks like there; you can go through and change every element really if you wanted to in your Figma email design to optimize it for dark mode. It's worth being mindful of the fact that the dark mode preview is only showing you your dark mode overrides that you've added personally via the Figma plugin as well. What that means is this is not an accurate representation of the automatic dark mode styles that different email clients will include; email clients like Apple Mail or Outlook will actually automatically inject their own dark dark mode style sheet. That will automatically do things like invert the colors of the background and text, and try and do its job automatically to some extent, but these additional overrides that you add in the Figma plugin will basically override their dark mode overrides where it's supported. That's just something to be really mindful of in case you're wondering why the preview here is looking one way, but when you actually go to preview it in something like Apple Mail or iOS it's looking a bit different, so I hope that makes sense.

If you've been wanting to optimize your designs a little bit further, I know a lot of you have been wondering how to do this by adding dark mode to your HTML emails from Figma. Currently, this is the best option that we have to do those specific dark mode overrides, and as the support increases over time this will hopefully become more and more useful in the future to really making sure our email designs come out exactly the way that we want under dark mode and regular mode in all these different email clients in the future.

Thank you for watching, I hope it's been helpful, and if you've been wondering about dark mode with your email designs and if you've been following along with the other Emailify Figma tutorials, I hope that if you've been wanting this dark mode feature you can now go ahead and try it. I'm really looking forward to seeing what everyone comes up with, and we'll be back very soon with more of these Figma tutorials. As always, thank you for watching, and we'll catch you in the next one.