Using Outsystems variables in CSS
Question
Application Type
Reactive

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?

Hi Erik,

Take a look at this forge component https://www.outsystems.com/forge/component-overview/9084/multi-theme-reactive

The OutSystems Experts team created the Multiheme Reactive forge component to demonstrate the theme switching.


Hope this helps,

Pedro

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