Updating the Style of Color‐Schemes and Themes

In this section I'm going to show you how to update the color-schemes and themes if you need to change them.

Just editing the .scss files of the color-schemes/themes won't be sufficient, because the .scss files are not actually loaded. Instead they will be converted into .css files in the public directory, which will then be dynamically loaded into the DOM-Tree, based on the set Color-Scheme/Theme by the server or the config/URL.

1. NPM command

To not always having to convert the changes from the .scss files to the .css manually, there is a command npm run scss-schemes or scss-themes. When calling this command or when saving a .scss file in the src/application-frame/styling/color-schemes/src/application-frame/styling/themes directory. The .css files are automatically created in the public directory under color-schemes/themes.

2. Update the Factory File

In the color-schemes/themes directory are files called factory-default.css and factory-basti.css, please update those files whenever there is a change to default or basti, this is not automated yet. This factory file is needed in the CSS-Designer, to restore the factory status if needed.

3. Update the Designer

In the CSS-Designer please update the editor files. Eg. We are editing a selector in the color-schemes. Before:

{
    variable: "--std-menu-background",
    label: "Background",
    type: "color",
    cssType: "scheme",
    value: docStyle.getPropertyValue('--std-menu-background'),
    usage: new Map<string, string[]>()
    .set(".menu-panelmenu-wrapper", ["background: var(--std-menu-background);"])
    .set(".p-panelmenu .p-panelmenu-header a", ["background: var(--std-menu-background);", "border-color: var(--std-menu-background);"])
    .set(".p-panelmenu .p-panelmenu-content", ["background: var(--std-menu-background);"])
    .set(".p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link", ["background: var(--std-menu-background);"]),
    tooltip: "The background-color of the sidebar menu."
},

After:

{
    variable: "--std-menu-background",
    label: "Background",
    type: "color",
    cssType: "scheme",
    value: docStyle.getPropertyValue('--std-menu-background'),
    usage: new Map<string, string[]>()
    .set(".menu-panelmenu-wrapper", ["background: var(--std-menu-background);"])
    .set(".p-panelmenu .p-panelmenu-header **some change**", ["background: var(--std-menu-background);", "border-color: var(--std-menu-background);"])
    .set(".p-panelmenu .p-panelmenu-content", ["background: var(--std-menu-background);"])
    .set(".p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link", ["background: var(--std-menu-background);"]),
    tooltip: "The background-color of the sidebar menu."
},

Now the .css file generation will be updated.

4. Update other Projects!

Other projects which have the reactUI as library, also have the color-scheme and theme directories in the public folders, so the .css files can be dynamically loaded. Update those files to ensure that they are in sync.