Hi all,
I was wondering if it’s possible to change components with the light and dark mode feature. The use case is in my site navigation I want to change the brand logo to the correct version depending on whether the designs are in light or dark mode. I know I could just change it in the properties panel but it would be nice to have it automated so other designers get the correct logo with limited brand knowledge.
Any thoughts or help appreciated
James
Hi, James. What do you mean by automated? I’m quite confused. You asked if it’s possible to change components and then answered it on your 3rd sentence.
Add a string variable to your light / dark collection modes, something like theme = light | dark.
Make a variant for your logo, name your properties and make sure values are the same as values of your theme var, theme=light and theme=dark.
Finally, bind the logo theme property to variable theme.
And here you go
Hmmm. Not sure though if this is the automated, you’ll still be toggling them on the properties panel.
That’s fine to be not the sharpest knife in the drawer 😉
You either switch mode on the frame and then drill down to the logo component to set the proper variant. That’s at least two steps and if you have few components that rely on this logic the process becomes more tedious.
Or you link mode with the variant and it becomes automatic in a way that I only need to enable the proper mode and all the components inside that frame or page adjust themselves automatically.
Makes sense?
will try your method there Pavel and confirm if this is what I was after
Many thanks Pavel! Simple and to-the-point.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
