10
Views
2
Comments
How can I change the value of CSS variables dynamically?
Question
Application Type
Reactive

Hi there.

In my app, the user is going to be able to select the app's color palette from a list of options. This would mean that depending on their choice, I'd have to change the values of some CSS variables (like --color-primary).

First of all, is this a good approach? Or should I be doing it in any other way? Any suggestions would be appreciated.

If this IS a good approach, then how could I be able to change these CSS variables dynamically?

Thanks in advance.

Hi Yizuhi Galaviz,

I think that you can you JS code to change CSS color of classes in your app. If you use Reactive web app or mobile app, you can choose this one. Refer to this post: https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_and_Reactive_Apps_Using_JavaScript 

Changing CSS color using JS:  https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm 

I hope that you will look for the good way.


Best regards,

Sang

From Vietnam with love!


Rank: #287

Hi Yizuhi

To specify the CSS classes dynamically use an Expression:

  • In the Style Classes field (Mobile and Reactive Web apps)

For detail, please refers to this official document.
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)


Kind regards,