Creating Style Properties

How to create your own style properties.

CSS style properties are an effective way to define theme-wide styles that can be used to style both Vaadin components and other UI elements. Similar to variables and constants in Java, they allow you to reuse the same values in multiple places, instead of repeating the same literal value each time.

The default Lumo theme is based on a set of style properties, but you can also define your own style properties and use them in various ways.

A custom style property is defined with a simple declaration in a stylesheet. Style properties are always prefixed with a double dash (--). In most cases it makes sense to declare the property in the root html scope like so:

html {
  –-my-brand-color: orange;
  --warning-background: yellow;
}

Style properties are used through the var() CSS function. You can provide a fallback value that is used in case the property is undefined.

/* Scoped override Lumo property with custom property value */
.navigation {
  --lumo-primary-color: var(--my-brand-color);
}

/* Using custom property values, with and without fallback */
div.warning-message {
  background-color: var(--warning-background);
  color: var(--warning-text-color, red);
}

Just like the built-in Lumo style properties, custom style properties can be redefined for any element scope, as you can see here:

/* Redefining custom property for a particular scope */
vaadin-horizontal-layout.footer {
  --warning-background: orange;
}

18794767-1ae7-45d5-a4e9-c846203f75b4

Docs

Docs

Creating Style Properties