Change the color palette at Runtime

Change a color palette in runtime

WorkWithPlus generates a color palette when we run the DesignSystemWizard, then we can customize this palette of colors as we wish.
If you want more than one color palette for the same knowledge base and modify them in run time, we can make use of advanced .css according to GeneXus documents in the following SAC.

To illustrate how it would be done together with WorkWithPlus we must follow the following steps:

1- Define .css files with the colors corresponding to a palette that we have chosen and assign it to custom variables, in our case to exemplify it we are going to create two color palettes, one named Dark.css and the other Light.css:


 : root {

--primary: blue;

--secondary: yellow;

--danger: network;



: root {

--primary: #aaa;

--secondary: #bbb;

--danger: #ccc;


Change a color palette in Runtime

2 - Then it will be important that we save these .css files in the correct folder, the path will coincide with the WorkWithPlusTheme.css and Carmine.css, in our case the path is "\ CSharpModel \ web \ Resources \ English" :

Change a color palette in Runtime 2

3 - For WorkWithPlus to identify these color palettes, the path where the .css file is located must be added in the formHTML by the MasterPage, for our example we are going to add a condition that depends on a numeric variable which represents the palette selected by the user:


    If &Var1= 1
        Form.HeaderRawHTML += '<link href="Resources\English\Dark.css" rel="stylesheet" type="text/css">'
     If  &Var1= 2
      Form.HeaderRawHTML += '<link href="Resources\English\Light.css" rel="stylesheet" type="text/css">'

Change a color palette in Runtime 3

4- In our case we want the user to select the color palette when logging in, then we are going to create an action group with the different palettes we have, then each user action is going to set a value to &Var1 and it is going to save it in the session:

   &Var1= 1

Change a color palette in Runtime 4

Change a color palette in Runtime 5

5 - We already have our color palettes, and we also configure the functionality to show each one of them whenever we want. Now the last thing we have to do is assign the colors to the classes we want. In our example we are going to assign it to some classes such as: MasterFooterCell, MasterHeaderCell, Form, MainConteiner:


Change a color palette in Runtime 6

As shown we add the variable --primary in the custom properties, but it can be any variable that has been defined in the .css. You can also add all the .css settings in addition to the background-color.

7 - The result is this:

Change a color palette in Runtime 7


Next is an example kb change a color palette at runtime