How can I change the value of CSS variables dynamically?

Yizuhi Galaviz

Rank: #2834

How can I change the value of CSS variables dynamically?

Question

Reactive

CSS

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.

on 17th Feb

Nguyen Thanh Sang

Rank: #2329

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!

14 days ago

Tom Zhao

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,

14 days ago