Theme levels

The appearance of a framework control can be described at different levels of the theme system.

Level 4: Attribute definition per control type

Control themes can be defined at level 4 of the theme system. Control themes allow individual attributes of the framework control to be overwritten. A control theme is defined within a theme file and can be created using the theme editor in Engineering or directly as JSON code. The theme file must be assigned to a specific theme within the project:

The theme file must then be referenced as "ThemedValues" under "themes" in the Description.json file.

Level 5: Attribute definition by DefaultValueInternal

At level 5 of the theme system, it is possible to set the properties of the attribute via DefaultValueInternal. DefaultValueInternal can be set in the Description.json file of the framework control.

Example of a color attribute:

"defaultValueInternal": {
  "color": "rgba(255, 0, 0, 1)"
}

Level 8: Cascading Style Sheets per theme

Cascading style sheet files can be added to a theme at level 8 of the theme system. Within the CSS file any element properties can be defined.

The CSS file "Stylesheet" must then be referenced under "themes" in the Description.json file of the framework control.

Level 9: Cascading Style Sheets on project level in the control

At level 9 of the theme system, Cascading Style Sheet files can be added independently of a theme at project level in the control. By default, each framework control project contains a Style.css file at project level. Within this file, element properties are defined that are to apply independently of a theme (e.g. sizes of a div).

All CSS files at the project level in the control must be referenced under dependencyFiles in the Description.json file of the framework control.