Lumo

Customization

When the default styles are not suitable, you can adjust them with in the following ways.

CSS custom properties

Lumo defines global CSS custom properties that you can use to make smaller adjustments to the styles.

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

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 global style scope of you application:

Style scopes

With the addition of Shadow DOM, styles on a webpage can be divided into global and local scoped styles.
Learn more about style scopes

Browser compatibility

Use the <custom-style> element for cross-browser compatility. You should import it explicitly from the Polymer package.

Scoped changes

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

Global scope

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 you need to use a theme module.


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 Lumo and need to style elements freely.

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

Theme module documentation