Lumo – The Default Theme
The default look and feel of Vaadin components comes from the built-in theme called, Lumo. It’s based on a set of customizable style properties, and comes with built-in dark and compact variants.
The look and feel of all Vaadin components can be easily customized in a consistent manner across the entire application by supplying your own values to these style properties.
The built-in dark and compact variants are predefined sets of style property values that can be applied to the entire application or to parts of it.
The Lumo theme also includes a comprehensive set of CSS utility classes that can be applied to HTML elements and layout components through Java, to change their styling without writing any CSS of your own.
While it is possible to disable loading of the Lumo theme, it’s generally best to modify the styling of Vaadin components by customizing Lumo itself and adding your own CSS on top of it, with a custom theme built on top of Lumo.
Topics
The following topics are covered in this section:
- Lumo Style Properties
- The style properties of the built-in Lumo theme.
- Lumo Variants
- Using the built-in light, dark, and compact variants in Lumo.
- Utility Classes
- List of Lumo utility classes and descriptions of them.