# 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"
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/winforms/extend-or-modify-the-converted-application/switching-css-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.