Valo

Customization

Light and dark color palettes

Read more about light and dark color palettes from the colors documentation.

Small adjustments

CSS custom properties

Valo defines global and component specific CSS custom properties that you can use to make smaller adjustments to the styles.

The pages under the “Style guide” section (Colors for example) list the custom properties that affect all elements.

Global changes

As an example, if you wish to adjust the border radius for all elements that are affected by it, you can place the following code in the top level scope of you application (e.g. index.html):

Example: changing the border radius of all elements with a global style

Scoped changes

If you wish to adjust the border radius for vaadin-button specifically, for example, you can do the following:

Example: Changing the border radius of one component using a common custom property

This only works if the styles are placed in the same style scope as the buttons you want to style.

To work around this limitation, we can target the button specific --valo-button-border-radius custom property instead, and apply that in the global scope:

Example: Changing the border radius of one component using a component specific custom property in the global style scope

---

Advanced styling

Theme modules

You can create new theme modules to add low level CSS for any element when you can’t accomplish the styling you want using the CSS custom properties provided by the element or Valo and need to style elements freely.

Read the documentation for ThemableMixin to learn how theme modules work.

Theme module documentation