> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/winforms/extend-or-modify-the-converted-application/switching-css-theme.md).

# 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](https://www.telerik.com/kendo-angular-ui/components/styling/theme-bootstrap/).
* [Kendo UI Default theme](https://www.telerik.com/kendo-angular-ui/components/styling/theme-default/).
* [Kendo UI Material theme](https://www.telerik.com/kendo-angular-ui/components/styling/theme-material/).

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:

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

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

```javascript
{
  "$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.

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

And add a new reference in the same place.

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

Finally, run in the opened CommandProm the command:

```batch
npm run build
```

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

![Application with desktop theme](/files/kdXWTQz5cfQD20Jg8JTK)

### Default theme

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

![Desktop theme](/files/U1qz2O2P0xI9jEpFbOGR)

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.

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

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