Color variables vs Variables chnging Component states - what is the best practice?

Hello everyone,

I’m new to the community and wanted to hear your thoughts on using variables.

From my understanding, you can achieve the same result in two ways when working with variables. For example, I want to create both a Dark and Light Theme for my screen. I could create color variables and then decide that everything green will turn blue in the other theme, and vice versa.

Alternatively, if I’m working with components, I could create two variations for each component, naming them Light and Dark Theme, and use a string variable to switch between the variants accordingly.

Which approach do you think is more appropriate? What are the pros and cons of each? When might it be better to use one over the other?

I’d appreciate any thoughts or questions, even if it’s to point out that my understanding is incorrect and it should be done in a third way :)….