Change theme variable dynamically

What do you want to achieve?

Change the color of an object that is themable

What have you tried so far?

modifying the property with ui_object_set_themeable_style_property

Screenshot or video

Others

  • **SquareLine Studio version:1.4.1
  • **Operating system:Windows 11
  • **Target hardware:ESP32

I have several buttons with a border color that is themable (dark/light grey), and if they are ‘turned on’, they should change to dark/light blue depending on theme
I have no issue doing that with ui_object_set_themeable_style_property, but if I change themes, the color remains on the ‘blue’ shades even though i had changed the color back to grey earlier
If I had not changed a particular button to blue, that button stays on the gray shades, so no issue there
I think there is an issue with the rewrite of the property with ui_object_set_themeable_style_property but i cannot find it!

The function ui_object_set_themeable_style_property() is not intended to be used like that, i.e. the can’t be overridden by calling the function again. (It will create a new colliding entry.)
If you really want to change the theme-colors in your LVGL code after exporting from SquareLine Studio, you should modify the style-variable’s value itself which was given as the 2nd argument of ui_object_set_themeable_style_property(). (In case of SquareLine export these are elements of const arrays which can be a problem in your case, but themes are usually not to be modified afterwards by coders). Then setting the theme again or calling _ui_theme_set_variable_styles() directly (or periodically) the change of the value will be sensed and the local style property (color) will be set.
(Yet seeing your use-case makes us consider adding a function to delete themeable style-properties, not just to add them.)
(I attached a projectfile which roundabout does what you describe above, just in case.)
ButtonColorThemeChanges.zip (10.1 KB)

Thanks a lot for your answer!
I did what you suggested, added a new state (using LV_STATE_USER_1) for the ‘ON’ state of the buttons, styled that with the themable colors, and finally changed states on the code. Worked like a charm.
Thanks!!

1 Like