When the default styles are not suitable, you can adjust them with in the following ways.
Lumo defines global CSS custom properties
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
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.