CSS properties (variables)

All browsers which are officially supported browsers also support CSS properties (variables). Therefore you can basically use them as you wish in your custom CSS.

See Can I use for more details on browser support.

Organizational tip

It is recommended to declare all CSS variables in a dedicated custom CSS module named Variables or something the like instead of spreading them all over different modules. This helps you keep an overview of all available variables.

Changing variable values at runtime

The values of CSS variables declared in custom CSS can be changed dynamically at runtime using the following Signals and Slots:

CssVars.ValueChanged -> Configurator.updateCssVariables(CssVars.Value)

The value which is given to the updateCssVariables slot needs to be the value of a record component with column names representing the names of the CSS variable without the leading --.

Example

Configurator CssVariables in company Combeenation College:
Published demo

/* Custom CSS */
:root {
  --cfgrBckgrColor: #DD0060;
  --labelTextColor: yellow;
  --labelBckgrColor: #37A58C;
}

.cfgr-parent {
  background: var(--cfgrBckgrColor) !important;
}

.cfgr-label {
  color: var(--labelTextColor);
  background: var(--labelBckgrColor);
}

/* Record component "CssVars" */
{
  { Theme=Text, cfgrBckgrColor=Text, labelTextColor=Text, labelBckgrColor=Text }
  { "Colorful", "#DD0060",           "yellow",            "#37A58C" }
  { "Light",    "white",             "white",             "rgba(0, 0, 0, 0.6)" }
  { "Dark",     "black",             "black",             "rgba(255, 255, 255, 0.6)" }
}