Please see if this article helps : https://www.outsystems.com/blog/posts/multiple-themes-for-applications/ ( Scenario 3: You want your application to change a theme in runtime without breaking the app. )

first off, yes, please don't listen to that colleague.

Maybe look at what they are doing in here for inspiration.

Ok great, I'll take a look into those. Thanks both!

Hello,

From my experience, the best way to do this would be to dynamically change the CSS variables you are already using throughout the application. On the OnInitialize event of your layout, you can use Javascript to accomplish this. Something like this:

Otherwise, you can toggle the different themes depending on a class you apply to the main layout. For example, you can apply ".first-brand-styles" to the parent container using javascript, and handle the different variable definitions with CSS. This is my personal favorite way to go, since you can adjust more easily and do not have to change the script every time anyone wants to adjust the theme colors. 

Just please make sure that the text is still readable and the contrast is good. It can be a pain to change themes after an app is already built, and to make sure that everything is still accessible. 

Hope this helps, 

Mafalda

Hi Aaron Gordon,

You can define CSS variables in your theme and use them across your styles. Then, use JavaScript to update those variables based on the user’s brand. It’s a clean and scalable way to handle branding without touching every screen. 

Hi,

1. Define CSS Variables in Theme 
 In your application’s Theme CSS, define your CSS variables (typically in :root): 

:root {  --brand-color: #0054a6;  --text-color: #000;  --background-color: #fff;}

Use these variables in your style classes:

cssCopyEdit.button {  background-color: var(--brand-color);  color: var(--text-color);}

2. Use JavaScript to Update Variables Dynamically

Create a Client Action that runs JavaScript when the brand changes:

javascriptCopyEditdocument.documentElement.style.setProperty('--brand-color', '#e60000');
 // Red for Brand A
document.documentElement.style.setProperty('--text-color', '#ffffff');
document.documentElement.style.setProperty('--background-color', '#000000');

You can make this dynamic using parameters or logic tied to your brand selection.