---
title: "UI themes | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/ui-framework/storefrontjs/themes/"
---

# UI themes

> StorefronJS supports customization of UI themes.

When creating a `storefront` instance, you must pass the [mandatory parameters](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/ui-framework/storefrontjs/getting-started.md) `tenantId`, `cchubUrl`, and `user`. To change the appearance of the editors, you can also pass `themeSettings` and define a new primary color, UI styles, or a logo.

## Primary color

To change the primary color of the editor, you can define a new color in the CSS style in the `primaryColor` property when initializing the `storefront` instance.

```js
const storefront = new Aurigma.StorefrontJS({
    tenantId: yourTenantIdHere,
    cchubUrl: 'yourCchubUrlHere',
    user: user,
    themeSettings: {
        primaryColor: '#10e642'
    }
});
```

## UI styles

The `themeSettings` allow you not only to change the primary color but completely customize the styles using the theme engine. This approach uses variables defined in the **au-default-theme.html**.

```js
const storefront = new Aurigma.StorefrontJS({
    tenantId: yourTenantIdHere,
    cchubUrl: 'yourCchubUrlHere',
    user: user,
    themeSettings: {
        styles: {
            "--theme-primary-color": "#30c2ff",
            "--theme-primary-color-hover-button": rgba(48, 194, 255, 0.12),
            "--theme-background-color": "#eee"
        }
    }
});
```

## Logo

Use the `logo` property of `themeSettings` to pass SVG graphics for the editor's logo. For example, if an SVG file has the following content.

```xml
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image width="32" height="32" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMiA0VjIwTTEyIDRMMTggMTBNMTIgNEw2IDEwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg=="/>
</svg>
```

Creating a `storefront` instance as follows:

```js
const storefront = new Aurigma.StorefrontJS({
    tenantId: yourTenantIdHere,
    cchubUrl: 'yourCchubUrlHere',
    user: user,
    themeSettings: {
        logo: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="32" height="32" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMiA0VjIwTTEyIDRMMTggMTBNMTIgNEw2IDEwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg=="/></svg> '
    }
});
```