This is an old documentation. Go to the latest Customer's Canvas docs

IThemeSection Interface

A structure defining the section of theme colors in the Color picker. For details, see the Color Picker and Product Themes.

let colorSets = {
    "violetSet": {
        "main": "rgb(102,45,145)",
        "alternative": "rgb(150,67,214)",
        "borders": "rgb(190,107,255)",
        "texts": "rgb(32,18,77)",
        "shadows": "rgb(123,123,123)"
    "roseSet": {
        "main": "rgb(241,160,175)",
        "alternative": "rgb(255,200,214)",
        "borders": "rgb(255,255,255)",
        "texts": "rgb(224,102,102)",
        "shadows": "rgb(88,88,88)"
let configuration = {
    productThemes: colorSets,
    defaultProductTheme: "roseSet",
    widgets: {
        ColorPicker: {
            sections: [
                  type: "ThemeSection"


Optional targets

targets: ColorPickerTarget []

An item property that you can specify a color for. The default value is ["All"].

Optional translationKey

translationKey: string

The section name. You can use either a string or an identifier of a string defined in the ~\Configuration\translations.json file.


The source type, "ThemeSection".

Optional viewType

The appearance of the section, either "Block" or "Line". The default value is "Block".