Light and Dark Modes with Color Variables in Figma. How to Create Mode Inheritance.

Learn how to use the new Figma Mode feature with color variables to create light and dark modes with ease.

Link to the product UI design file.

[leespringer]

I've watched different videos on utilizing dark mode. Yours was the easiest to understand. Great work, great explanation.

[eny_codes]

Thank you so much for this video, I have learned the concept of light mode and dark mode using variables
You're one of my fave youtubers.

[whennn]

Quick tip: For the "error" that you encounter when a white text from a button that you dont want it to change to dark (black) color, you can manually select the layer that then select "change variable mode" and select "LIGHT" so it will keep those properties in dark or light mode.

[keneanyaegbunam]

Really needed this. Thank you! I noticed at 14:08, you decided to break open the variable to solve your problem. I think a new variable (maybe 'btn-color') might have been more "on topic" solution. 🙏🏾

[annafilou]

This was a great video! The fact that you took us through the process step by step helped me understand exactly how mode variables work. That said, I think it would make more sense to name your colors differently. For example, you name the background color "white" but in dark mode it's not white! It would have made more sense to name it "background". Same for "text", etc.

[akornion]

great video, i finally understood how to use color variables. thank you!

[MrJesusAmos]

Very well explained! thanks, you have a 👍like

[aniebietoluwa]

Thank you for the wonderful video! Your explanations are incredibly clear and easy to follow, and I greatly appreciate it. I now feel confident enough to pass on this knowledge to someone else. 😆

[DemoShipper]

Exactly what I was looking for! thanks!

[monalynnacap]

thank you so much! you teach it well that it's easy to understand.

[rar]

Well explained. Just what I needed to know. Thank you.

[looksandlogic]

Great video! The information was presented effectively and is quite helpful.

[TheChefAine]

This is actually really interesting 😅. Figma did a thing here with this update for sure. Thank you for sharing ❤️❤️

[TamaraBode]

Okay, Sweet
I don't have to go rack my head around how to learn this

[chitturitulasiram]

It's great. Thanks for the video. :)

[izuchukwuigwe]

Thank you very much.
When working on large projects with multiple components, how do you then implement this dark mode in such a way that it matches properly. Especially when there may be further changes in color to those components

[SnixSnix-dr]

But how I or developer, must understand which mode is selected color, just looking in the figma right menu?

[anastasiianehoda]

what is solution if some elements need to keep the while mode color (in some cases) when they are in dark mode? For example I don't want status bar to change the color when it is over the image in dark mode.

[ramazanguler]

Thank you for understandable good lesson

[nonsobright]

I thought it's was free. It comes with payment