Lumo Theme

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.

You don’t need to enable Lumo explicitly as it’s 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:

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

You can disable the Lumo theme for your application using the @NoTheme annotation. However, this isn’t recommended for most applications as it’s easier to extend the Lumo theme than to create a brand new theme.