Canvas Commands

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

It accepts the same argument as a editor.applyProductTheme. Typically, it is a theme name as a string, but you can also pass a structure describing an "ad-hoc" theme.

Example - 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": "canvas", 
    "name": "cc",
    "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": "{{ $['style']._.props.themeName }}",
     }
}

Example - 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": "canvas", 
    "name": "cc",
    "params": {
        "initial": { ... }, 
        "setTheme": {
            "primary": "{{ $['primary-color']._.color }}",
            "secondary": "{{ $['secondary-color']._.color }}"
        }
     }
}