Best way to add dynamic root color variables?
Question

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?

mvp_badge
MVP
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

mvp_badge
MVP

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?

mvp_badge
MVP
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

Hi André,

Did you implemented via JavaScript or did you found any other solution?

Thanks, Paulo Torres

Hi Paulo,

Yes, after the user login, I added a new action with this logic:
The first action just gets primary and secondary colours from the DB associated with a user (or company that the user belongs to) for example, if this is empty I end which will just use the default colour.

Hope this helps

Hi André,

Thanks for the answer.

I did more or less the same, i created an Action "On Application is Ready" to get color from DB and assign in Client Variable after i have a JS in Layout to change the color.


document.documentElement.style

    .setProperty('--primary-color', '#444');

Thanks, Andre for the simple and clear explanation !

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