For common use cases, Valo offers many built-in theme variations you can apply to individual
component instances. For example, there is a “primary” theme for buttons, and a ”small” theme
for text-fields. The built-in variations are applied using the theme attribute.
The built-in variations are documented per component, including source code examples how to apply them. See Button’s color variations for example.
Read more about light and dark themes from the colors documentation.
Valo defines global and component specific CSS custom properties that you can use to make smaller adjustments to the theme.
The pages under the “Style guide” section (Colors for example) list the custom properties that affect all elements.
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):
Use the <custom-style> element for
cross-browser compatility.
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, we can target the button specific
--valo-button-border-radius custom property instead, and apply that in the
global 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 the theme and need to style elements freely.
Read the documentation for ThemableMixin to learn how theme modules work.