# Themes in WebDesigner and Js Viewer Components

Learn all about managing and applying themes, built-in and custom-made in the WebDesigner and Js Viewer components, using UI and the API at runtime.

## Content

The creation of custom themes and applying them on Web Designer and Js Viewer is now simpler.

The modules '[@mescius/activereportsnet-designer](https://www.npmjs.com/package/@mescius/activereportsnet-designer)' and '[@mescius/activereportsnet-viewer](https://www.npmjs.com/package/@mescius/activereportsnet-viewer)' provide 'ColorTheme' and 'ColorThemes' objects, which can be used in both designer and viewer components to customize their appearance. Using the respective APIs, you can modify the color scheme of all interface elements within the Designer and Viewer to align with specific use case requirements. Let's explore some quick use cases and update the Script.js file in our [WebSamples](https://github.com/activereports/WebSamples19) for WebDesigner and Js Viewer.

```javascript
import { createViewer, ColorTheme, ColorThemes } from '@mescius/activereportsnet-viewer';
import { arWebDesigner} from '@mescius/activereportsnet-designer';
```

## Create Custom Theme

Use the following code to create a custom theme:

```auto
var theme = {
    name: 'testTheme',
    backgroundMain: '#f0f0f0',
    backgroundPanels: '#ffffff',
    primary: 'blue',
    secondary: 'green',
    neutral: 'grey',
    error: 'red',
    warning: 'yellow',
    fontFamily: 'Arial'
};
```

## Create Custom Theme based on Built-in Theme

Use the following code to create a custom theme based on built-in theme:

```auto
var theme = {
    ...ActiveReports.ColorThemes.default
    name: 'testTheme',
    primary: 'blue',
    secondary: 'green'
});
```

## Themes in WebDesigner

### Apply Theme using the Application's UI

Use **Theme Picker** to select from the pre-defined themes in the application.

### Manage Themes using WebDesigner API

Use the [initialTheme](/activereportsnet/docs/v19.2/developers/create-applications/web-designer-application/web-designer-api) API to apply an initial or default theme to the WebDesigner component.

### Apply a Custom Theme

The following code sets a custom theme as the initial theme of the WebDesigner.

```auto
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'testTheme',
        themeSelector: {
            enabled: false,
            availableThemes: ['Default', theme]
        }
    }
});
```

### Apply a Built-in Theme

The following code sets a built-in theme as the initial theme of the WebDesigner. Here are the built-in themes you can choose from: default, defaultDark, darkOled, highContrast, and highContrastDark.

```auto
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'defaultDark',
        themeSelector: { enabled: false }
    },
});
```

## Themes in Js Viewer

Use the [initialTheme](/activereportsnet/api/v19.2/MESCIUS.ActiveReports.Blazor.Viewer/GrapeCity.ActiveReports.Blazor.Viewer.ThemeSettings.InitialTheme.html) API to apply an initial or default theme to the Js Viewer component.

### Apply Theme using the Application's UI

Use **Theme Picker** to select from the pre-defined themes in the application.

![Theme Picker in Js Viewer](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/theme-picker_jsviewer.png)

### Apply a Custom Theme

The following code sets a custom theme as the initial theme of the Js Viewer.

```auto
GrapeCity.ActiveReports.JSViewer.create({
    element: '#root',
    themes: {
        initialTheme: 'testTheme',
        themeSelector: {
            enabled: false,
            availableThemes: ['Default', theme]
        }
    }
});
```

### Apply Built-in Theme

The following code sets a built-in theme as the initial theme of the Js Viewer. Here are the built-in themes you can choose from: activeReports, activeReportsDark, darkOled, default, defaultDark, highContrast, and highContrastDark.

```auto
GrapeCity.ActiveReports.JSViewer.create({
    element: '#root',
    themes: {
        initialTheme: 'defaultDark',
        themeSelector: { enabled: false }
    },
});
```

## See Also

[WebDesigner API](/activereportsnet/docs/v19.2/developers/create-applications/web-designer-application/web-designer-api)

[Blazor WebDesigner API](/activereportsnet/docs/v19.2/developers/create-applications/blazor-web-designer-application/web-designer-api-blazor)

[Js Viewer API](/activereportsnet/docs/v19.2/developers/create-applications/js-viewer-application/jsviewer-api)