---
title: "setTheme | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/design-editor-commands/set-theme/"
---

# setTheme

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

It is assumed that inside the [initial](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/design-editor-commands/initial.md) 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](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/change-theme.md)

## Params

- `theme` - the theme name as a string, but you can also pass a [structure describing an "ad-hoc" theme](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/change-theme.md#defining-themes).

This command accepts the same argument as the [editor.applyProductTheme](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/change-theme.md#changing-color-themes-at-runtime) method from the IFrame API.

For the complete list of parameters, you can refer to [IDesignEditorDefinitionSetTheme](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditordefinitionsettheme).

## Example of 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": "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

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