Interface IThemeConfiguration

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

Package: @aurigma/design-editor-iframe

Examples

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

logo

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+

Declaration

logo: string;

Property Value

Type	Description
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+

primaryColor

The primary color of the UI theme, a string in the CSS format. For example, "#78187b" or "rgb(120,24,123)".

Declaration

primaryColor: string;

Property Value

Type	Description
string	The primary color of the UI theme, a string in the CSS format. For example, "#78187b" or "rgb(120,24,123)".