Theme Variables

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:

- the value is overridden in the project's 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).

- the variable definition exists only in the project's 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.