Join the Webstudio community

Updated 3 months ago

Handling Light/Dark/System Theme Toggle with Tokens

At a glance

The community member is looking for a way to handle light/dark/system theme toggling using tokens, instead of the previous method of using JavaScript to toggle the theme and set it in local storage, and then using CSS variables to define the colors. The comments suggest that this functionality will work via variables in the future, but it is not ready yet. One comment explains that it would be similar to using CSS variables, but the variables would be part of a theme/collection in the style panel.

Can anyone suggest handling the light/dark/system theme toggle with tokens? I can do this on a basic html/css/js site but I haven't ever used tokens for it. Previously, I would have js toggle the theme and set that in my local storage and use css variables to define the colors.
O
J
3 comments
It will work via variables in the future, but right now its not ready
basically css variables but you would use them in style panel and they would be part of a theme/collection
Looking forward to it, thanks!
Add a reply
Sign up and join the conversation on Discord