Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Lumo Theme

Description of the built-in Lumo theme that is used by default in Vaadin apps and components.

Lumo is the default theme for all Vaadin applications and components, which can be customized to fit your visual style requirements.

The core Lumo package defines the basic building blocks for component themes as CSS custom properties (also known as design tokens) such as colors, typography and other visual styles. In addition to the custom properties, Lumo includes light and dark mode variants, as well as a compact mode variant.

There is no need to enable Lumo explicitly as it is enabled by default for all Vaadin applications and components. However, if you want to, you can do it explicitly using the @Theme annotation as follows:

@Theme(themeClass = Lumo.class)

Check this guide for more information on how to use the @Theme annotation.

Note that you can disable the Lumo theme for your application using the @NoTheme annotation. However, this is not recommended for most applications as it is easier to extend the Lumo theme than to start from scratch.

Topics

The following topics are covered in this section:

Variants
Learn how to enable Lumo light, dark, and compact variants. Learn also about the component variants.
Design Tokens
The design tokens, such as colors, typography and other visual styles that define the Lumo theme.
Utility Classes
Describes the the set of CSS utility classes included in Lumo that enable building any UI without custom CSS.
Figma Libraries
Includes links to the official Vaadin Figma libraries that designers and developers can use to create pixel-perfect UI designs and prototypes.