@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
107 lines (96 loc) • 3.13 kB
Markdown
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
- `theme` - the 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).
This command accepts the same argument as the [editor.applyProductTheme](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.editor.applyproducttheme.htm) method from the IFrame API.
## 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 }}"
}
}
}
```