UI themes

• 1 minute to read

StorefronJS supports customization of UI themes.

When creating a storefront instance, you must pass the mandatory parameters tenantId and cchubUrl. 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',
    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',
    themeSettings: {
        styles: {
            "--theme-primary-color": "#30c2ff",
            "--theme-primary-color-hover-button": rgba(48, 194, 255, 0.12),
            "--theme-background-color": "#eee"
        }
    }
});

For more details about the theme engine, refer to UI Framework Styling.

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.

<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',
    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> '
    }
});