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.

In addition to the custom properties, Lumo includes a ready-made Badge component and a collection of Icons which match the default Lumo visual style. It also has light and dark modes as built-in Variants.

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.

terminal

npm i @vaadin/vaadin-lumo-styles

Import 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.

JavaJavaScript

In server-side views (Java), use the @Theme annotation, as described in Using Themes.

UsingComponentThemes.java

Expand code

@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:

• Border

• Color

• Cursor

• Icons

• Shadow

• Sizing and Spacing

• Typography

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.