How change css variable value in runtime?

Hello people,

How can we implement an user color picker that can change the primary/secondary colors or just a css variable to customize user presentation?

It cannot be a static change. The end-user needs to pick-up from some pre-selected colors.

We know that if change only part of color system we can end with with a moster. Then we'll consider change the css color of some specific parts and not all theme or primary/secondary.

We know that if we need change just few widgets can do it by extended properties. It's not the case.

Just need to know how to make it.

Thanks,

Hello Márcio, 

I think what you are looking for is something like what Marcelo posted here: https://www.outsystems.com/forums/discussion/45651/dynamic-text-size/

There is also a nice article here with other references: https://css-tricks.com/making-custom-properties-css-variables-dynamic/

Hope this helps. Cheers. 

Hi Eduardo,

I will take a closer look tomorrow.

I found this very good post from Hugo Pinheiro that solves this and another feature we wanted. Have different themes for some customers of same multi-tenant app.

We will take a closer look to find the better way to do this.

Thank you for your time bringing more light on this too!

https://www.outsystems.com/forums/discussion/11432/howto-change-css-depending-on-the-user-in-session/