Custom CSS
  • 09 Jan 2023
  • 1 Minute to read
  • Contributors
  • Dark
    Light

Custom CSS

  • Dark
    Light

Article summary

All browsers which are officially supported browsers also support CSS custom properties. 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 --.

Variable naming

If you want to change CSS variable values dynamically via SigSlo you have to use names which are also allowed in Hive. E.g. you couldn't use names like label-text-color but would have to stick to labelTextColor etc.

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)" }
}

Was this article helpful?