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?