This is an old documentation. Go to the latest Customer's Canvas docs

IProductThemeConfig Interface

A configuration of product themes. For details, see the Product Themes topic.

var productThemeSet = {
    "violetSet": {
        "main": "rgb(102,45,145)",
        "alternative": "rgb(150,67,214)",
        "borders": "rgb(190,107,255)",
        "texts": "rgb(32,18,77)",
        "shadows": "rgb(123,123,123)"
    "roseSet": {
        "main": "rgb(241,160,175)",
        "alternative": "rgb(255,200,214)",
        "borders": "rgb(255,255,255)",
        "texts": "rgb(224,102,102)",
        "shadows": "rgb(88,88,88)"
    "lightStyle": {
        "C01": "rgb(241,160,175)",
        "C02": "rgb(255,200,214)",
        "SHAPE": {
            "fillColor": "rgb(132,118,57)",
            "borderColor": "rgb(7,70,163)"
    "darkStyle": {
        "C01": "rgb(102,45,145)",
        "C02": "rgb(150,67,214)",
        "SHAPE": {
            "fillColor": "rgb(32,18,77)",
            "borderColor": "rgb(37,47,63)"

CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition,
    { productThemes: productThemeSet, defaultProductTheme: "violetSet" }


[name: string ]: string | IItemData

The key is a color category or a style name, and the value is either a color or a style definition. If this value is a string, this is a color definition. Overwise, this value defines text properties. For the supported list of text properties, you can refer to the ItemData description.