---
title: "Interface: IThemeConfiguration | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IThemeConfiguration/"
---

# Interface: IThemeConfiguration

> A structure containing the properties that redefine the appearance of the UI theme.

## Example

``` js
let product = {
   "surfaces": { designFolder: "photobook" }
};

let config = {	
   "themeConfiguration": {
       "primaryColor": "#0090FF",
       "logo": "https://example.com/logo.svg"
   }
};

var editor = await CustomersCanvas.IframeApi.loadEditor(
                  document.getElementById("editorFrame"), product, config);
```

## Properties

### primaryColor

> **primaryColor**: `string`

The primary color of the UI theme, a string in the CSS format. For example, `"#78187b"` or `"rgb(120,24,123)"`.

***

### logo

> **logo**: `string`

The image of the standard preloader. You can define it through:

- a URL, for example: `https://example.com/logo.svg`

- an SVG element, for example: `<svg viewBox="0 0 32 32" ... fill="#0090FF"/></svg>`

- a base64 string, for example: `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhldD0iMzIi...dmc+`

***

### preloaderColor

> **preloaderColor**: `string`

The preloader color of the UI theme, a string in the CSS format. For example, `"#78187b"` or `"rgb(120,24,123)"`.