When the default styles are not suitable, you can adjust them with in the following ways.
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 .
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:
With the addition of Shadow DOM, styles on a webpage can be divided into global and local scoped styles.
Learn more about style scopes
Use the <custom-style> element for cross-browser compatility. You should import it explicitly from the Polymer package.
If you wish to adjust the border radius for vaadin-button specifically, for example, you can
do the following:
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.
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.