Change the color palette at Runtime

Page Id

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:

Dark.css:

 : root {

--primary: blue;

--secondary: yellow;

--danger: network;

}

Light.css:

: root {

--primary: #aaa;

--secondary: #bbb;

--danger: #ccc;

}

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" :

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:

     &Var1.FromString(&WebSession.Get("Theme"))
    

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

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
    &WebSession.set("Theme",&Var1.ToString())

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:

background-color:var(--primary);

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:

Next is an example kb change a color palette at runtime

Page Id