---
title: "Primary color | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/customization/primary-color/"
---

# Primary color

> This topic dwells on how you can change the primary color of the user interface of the Design Editor. This color is used for the following elements:

- Progress bars
- Popup headers
- Control elements
- Highlight of design elements
- Design element names

To change the primary color, you can pass [themeConfiguration](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IThemeConfiguration.md) with a `primaryColor` property into the editor.

```js
let editorConfig = {
    themeConfiguration: {
        primaryColor: "#ffa500"
    }
};
```

To specify a color, pass a string in the CSS format, for example, `"#ffa500"`, `"rgba(255,165,0,0.8)"`, or `"orange"`.

Let's look at how this color will change the user interface.

| Item | Default color (`"#30C2FF"`) | New color (`"#ffa500"`) |
| --- | --- | --- |
| Progress bar | ![Blue progress bar.](images/blue-progress.png) | ![Orange progress bar.](images/orange-progress.png) |
| Popup header | ![Blue popup header.](images/blue-header.png) | ![Orange popup header.](images/orange-header.png) |
| Control elements |![Blue controls.](images/blue-controls.png) | ![Orange control elements.](images/orange-controls.png) |
| Highlight and grips | ![Blue highlight and grips.](images/blue-grips.png) | ![Orange highlight and grips.](images/orange-grips.png) |
| Design element names | ![Blue element names.](images/blue-name.png) | ![Orange element names.](images/orange-name.png) |

You can also change the color at runtime as follows:

```js
await editor.setThemeConfiguration({
    primaryColor: "rgb(255,165,0)"
});
```