I have an application where a user can change css variables (like --color-primary), and store them as a separate css file in the database so that they can define the layout of an application. The application will be a multi-tenant app where an administrator can create layouts per tenant. The application should also have the possibility to change layouts per user (light mode vs dark mode).

I have created a web application where the file can be retrived from the database so that I can use the @import in css to pick up the file. The actoin needs to be anonymous, because the css picking up the file has no active session.

However, by using the @import, I do not have the possibility to add tenant and user variables to the url to get the right file.

I have also tried using the addStylesheetTag action. Tis does not seem to work correcty in React.

The other thing I tried is adding a javascript that replaces the variables on render:

This seems to work, but the standard layout is shown a couple of miliseconds before the new layout is shown.

The last option also seems slower in performance.

Is there a way that I can use Outsystems variables like GetUserId() inside th CSS, or is there another way to solve this so that I can use custom CSS by only overwriting CSS variables and not rewriting big parts of the CSS itself?