TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Command: setTheme

Allows for toggling a current theme in Customer's Canvas.

It is assumed that inside the initial command (or clientConfig.json of Customer's Canvas) you define your themes and use this command to recolor the entire canvas by changing an option value.

Learn more about themes in Customer's Canvas

Params

This command accepts the same argument as the editor.applyProductTheme method from the IFrame API.

Example of switching predefined themes

{
    "type": "option",
    "name": "style",
    "title": "Style",
    "prompt": "Choose a design style",
    "params": {
        "type": "radio",
        "values": [
            { "title": "Handwritten", "props": {"themeName": "Theme1" } },
            { "title": "Typewriter", "props": {"themeName": "Theme2" } }
        ]
    }
},
{
    "type": "design-editor", 
    "name": "design-editor",
    "params": {
        "initial": {    
            "productDefinition": {...},
            "editorConfig": {
                "defaultProductTheme": "Theme1",
                "productThemes": {
                    "Theme1": {
                        "Text": {
                            "color": "#001598",
                            "font": {
                                "postScriptName": "NothingYouCouldDo",
                                "size": 14
                            }
                        }
                    },
                    "Theme2": {
                        "Text": {
                            "color": "#333333",
                            "font": {
                                "postScriptName": "SpecialElite-Regular",
                                "size": 14
                            }
                        }
                    }
                },
                ...
            } 
        }, 
        "setTheme": {
            "theme": "{{ $['style']._.props.themeName }}"
        }
    }
}

Example of changing theme elements dynamically

{
    "type": "option",
    "name": "primary-color",
    "params": {
        "type": "color",
        "values": [
            { "title": "Black", "color": "#000" },
            { "title": "Red", "color": "#f00" }
        ]
    }
},
{
    "type": "option",
    "name": "secondary-color",
    "params": {
        "type": "color",
        "values": [
            { "title": "White", "color": "#fff" },
            { "title": "Blue", "color": "#00f" }
        ]
    }
},
{
    "type": "design-editor", 
    "name": "design-editor",
    "params": {
        "initial": { ... }, 
        "setTheme": {
            "primary": "{{ $['primary-color']._.color }}",
            "secondary": "{{ $['secondary-color']._.color }}"
        }
     }
}