Change components with light and dark mode

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

@Pavel_Kiselev this workes a treat so thanks for taking the time to reply

Many thanks Pavel! Simple and to-the-point.