This page allows you to override SCSS variables that control application styling and create new ones.
Theme variables are defined in Vaadin's Valo theme and CUBA Platform's Halo theme.
Valo theme variable definitions are read from SCSS files located in the \VAADIN\themes\valo
folder of the vaadin-themes
artifact.
Halo theme variables definitions are read from SCSS files of all used application components.
When a theme variable is overridden or defined in the project, it is written in the halo-ext-defaults.scss
file, which is generated when extending the Halo theme.
An icon located in the first column represents the variable status:
halo-ext-defaults.scss
file. If you click the icon, the value will be reset to a default value, i.e. removed from the project file.
- the value is set in an application component (default value).
halo-ext-defaults.scss
file. If you click the icon, the variable will be completely removed.
The panel below the table contains description of the currently selected variable. The description is extracted from comments in the SCSS file.
The page also contains color selection controls in the top right corner:
button allows you to paste hex code of the selected color to the value field. You can select a color from the palette if you click on the square color field located next to the button.