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