Command: setTheme
=================

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

It is assumed that inside the [**initial** command](initial.md) (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](https://customerscanvas.com/docs/cc/product-themes.htm)

## Params

It accepts the same argument as a [editor.applyProductTheme](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.editor.applyproducttheme.htm). Typically, it is a theme name as a string, but you can also pass a [structure describing an "ad-hoc" theme](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.configuration.iproductthemeconfig.htm). 

  
## Example - switching predefined themes

``` json
{
    "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

``` json
{
    "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 }}"
        }
     }
}
```