setTheme

• 1 minute to read

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

• theme - the theme name as a string, but you can also pass a structure describing an "ad-hoc" theme.

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

For the complete list of parameters, you can refer to IDesignEditorDefinitionSetTheme.

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 }}"
        }
     }
}