Log in to AnswerLog in to Follow
Yizuhi Galaviz
14Views
2Comments
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.

0
0
on 17th Feb

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!


1
0
on 18th Feb
Tom Zhao
Champion

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,

0
0
on 18th Feb
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.