Theme toggle with new theme stuff

1

Hello,

With the new and improved them editor, is there any way to affect theme variables from the user interface? I would like my users to be able to choose from at least light and dark themes with a toggle component.

Thanks :slight_smile:
M

2

using a variable, assigned to the theme values, you can make dinamic changes to the theme.

to do that , first you need to assign the colors in your theme

image
image801Ă—584 19.2 KB

and then, use a function in your components
image
image1139Ă—748 55.1 KB

image
image631Ă—582 29.2 KB

finally, set the function with the theme variables
image
image1049Ă—661 57.2 KB

1 Like
3

It looks like this will work - mostly.
To affect change across all components I would need to go into each style class and tie each to a local pallet and color variable, right?

1 Like
4

image
image801Ă—584 19.2 KB

if you mean here, yes you would have to choose some colors and then connect them to each component you want

5

I tried to use this method to toggle the background color of a page to get dark/light theme. But it does not automatically adjust the content colors, as “smartcolors” are meant to. Setting the background color manually to my “custom dark background” does behave smartly, but not when a formula is used. Is there a proper solution?