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:
![Theme levels 1:](Images/png/4947222795__Web.png)
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.
![Theme levels 2:](Images/png/4947227147__Web.png)
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).
![Theme levels 3:](Images/png/4947230603__Web.png)
All CSS files at the project level in the control must be referenced under dependencyFiles in the Description.json file of the framework control.