Best way to add dynamic root color variables?

I am trying to add dynamic color for primary, primary hover and secondary in the CSS.

I have a table associated with each tenant and wanted to apply the chosen color to the style sheet.  


Any suggestion on the best way to apply these dynamically in the CSS or in some other way? What is the best practice in OS, ideally to not have to add actions or some other instruction on each page?

Hi André,

Interesting question, this should be possible with some JavaScript. 

Maybe the next article can help you implement it.

https://css-tricks.com/updating-a-css-variable-with-javascript/

Regards,

Daniel

Daniel, that sounds like I would have to apply JS in every page being loaded... any other alternatives?

Solution

Hi Andre, 

That would be typically something you do either in the Layout webblock.

You could make it an generic function that you call in the Layout webblock so you have the functionallity implemented once, and reuse it automatically on each new screen created.

I don't see an alternative, you need to change the CSS and you can only do it I think when it is loaded in the DOM document object.

It shouldn't be that of a big impact on loading the page.

Regards,

Daniel

Solution