Documentation

Documentation versions (currently viewingVaadin 24)

Lumo – The Default Theme

Introduction to the built-in Lumo 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.

A small sample of Lumo style properties and their use in Vaadin components
Lumo Style Properties Example & Use in Vaadin Components

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
Understanding and utilizing the built-in light, dark, and compact variants in Lumo.
Utility Classes
List of Lumo utility classes and descriptions of them.