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 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é,
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/
Daniel, that sounds like I would have to apply JS in every page being loaded... any other alternatives?
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
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 !