Switching CSS theme

Say you have to work and the following happens:

Your boss comes along and asks you to change ALL the user interface to look for a more general look instead of the default red.

Thanks to the technologies implemented for WebMAP: WinForms to Web UI this change can be made with the following phew steps:

Currently, Kendo provides the following themes by default:

• Kendo UI Bootstrap theme.

• Kendo UI Default theme.

• Kendo UI Material theme.

For this example, we'll pick the Kendo UI Bootstrap theme.

Go to the helloworld-angular folder, Open a Command Prompt from that folder and run the command:

npm install --save @progress/kendo-theme-bootstrap

In the same folder helloworld-angular, open the file angular.json and you'll see this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "styles": [
              "src/styles.css",
              "node_modules/@mobilize/winforms-components/style-min/desktopTheme.css",
              "node_modules/@angular/material/prebuilt-themes/purple-green.css",
              "node_modules/@mobilize/winforms-components/styles/jQueryStyles.css",
              "node_modules/@mobilize/winforms-components/styles/styles.css",
              "node_modules/material-icons/iconfont/material-icons.css"
            ],
im  ...
}

Remove the line.

"node_modules/@mobilize/winforms-components/style-min/desktopTheme.css",

And add a new reference in the same place.

"node_modules/@progress/kendo-theme-bootstrap/dist/all.css",

Finally, run in the opened CommandProm the command:

npm run build

Run the application, and now you have a happy boss with the minimum work and changes done!

Application with desktop theme

Default theme

WebMAP uses a Desktop theme that is intended to look similar to a native Windows Forms application.

Desktop theme

Any converted application contains the Desktop theme set as the default option. In order to modify this theme the following line must be replaced in the angular.json file.

"node_modules/@mobilize/winforms-components/style-min/desktopTheme.css"

To switch back to the kendo's default theme, please replace the line above in the angular.json file with the following line:

"node_modules/@progress/kendo-theme-default/dist/all.css"