![]() 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 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. 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. 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. 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. 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. Instead of the white background with dark text we've now got a dark background with white text. 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. ![]() 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. Instead of being this sort of dark text, I can make it white text. 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. 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.įor 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. ![]() 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. 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. This Figma tutorial is just going to be showing you how to add additional dark mode specific style overrides to that email design. 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. 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. If you click on the "Install" button on the right-hand side, once it says "Installed", you'll be ready to go. 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. 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.
0 Comments
Leave a Reply. |