Best Practices for Structuring Variables in Light and Dark Mode

·

How do you guys work with the “Variables Modes”? To implement light and dark mode, how would you structure the variables? Would you use primitives+semantics like Modulify does? Or what is the best practice on Relume for light and dark mode?

21 comments

· Sorted by Oldest

Matt J.
·
·
Luuk are you using variable modes in any of your projects or no?
Ravi T.
·
·
yes but not sure on which level to apply it on primitives or color schemes
Matt J.
·
·
sorry Ravi - tagging somebody in to help us shed some light on this topic
Matt J.
·
·
might tag some others in here that might have experience so we can get some ideas flowing!
Matt J.
·
·
Michael R. are you using variable modes at all or not really?
Ravi T.
·
·
thank you so much matt!
Michael R.
·
·
Matt J. Not really just my clients don't need it honestly
Matt J.
·
·
Michael R. makes sense!
Michael R.
·
·
Ravi T. not sure if you do this but a friend of mine creates a toggle in the navbar. There are systems that you can use that can do it with the system settings. Again I'm not the expert becuase most of my sites are medical so they prefer more light than dark
🙌1
Luuk
·
·
hi Matt J., yes i'm using variables in all of my projects. whats the issue?
Matt J.
·
·
No issue - curious if you have any insights to share with Ravi around variable modes?
Luuk
·
·
https://finsweet.com/client-first/docs/variables#
Luuk
·
·
i think this docs shares everything
Matt J.
·
·
yeah for sure. Doesn’t include variable modes since it was released after this portion was created.
Luuk
·
·
yeah that needs to be setupped correctly