Skip to main content

Interface: IThemeConfiguration

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

Example​

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: 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)".

Was this page helpful?