Customer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

IThemeSection Interface

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

example
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"
              }
            ]
        }
    }
};

Properties

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.

type

The source type, "ThemeSection".

Optional viewType

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