Skip to main content

UI themes

StorefronJS supports customization of UI themes.

When creating a storefront instance, you must pass the mandatory parameters 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.

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.

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"
        }
    }
});

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.

<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:

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> '
    }
});
Was this page helpful?