Lumo
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.
Getting Started
The Lumo theme comes bundled with Vaadin, including all individual components. If you need, you can also install the core Lumo package separately from npm.
npm i @vaadin/vaadin-lumo-stylesImport and Include Style Sheets
If you do not explicitly choose a theme, Lumo will be used. You can also explicitly choose to use it.
The global style sheets, which define the global custom properties (a.k.a. design tokens) and define basic color and typography rules, are automatically included in your Vaadin applications when you are using Lumo as your theme, excluding Badges which needs to be imported and included explicitly.
You can import and include these style sheets manually if needed, for example if you are building a client-side only application.
In server-side views (Java), use the @Theme annotation, as described in Using Themes.
@Route(value = "")
@Theme(value = Lumo.class)
public class LumoApplication extends Div {
}Customization
The Lumo theme can be customized to fit your visual style requirements by adjusting the CSS Custom Properties it exposes as its public API. See Customization for more information.
The custom properties are documented in the following sections:
Lumo Theme Editor
To quickly adjust most of the global styles of Lumo, you can use the Lumo theme editor.
The Lumo theme editor is not yet an officially supported tool and does not necessarily support the latest versions of Vaadin. You can still use the CSS it produces by copying them to the correct files in your project.
Visit the Vaadin Labs page to give feedback about the Lumo theme editor tool.
8E3F2346-2D53-4070-8FF1-A9F426FD9760