Lumo Theme

The Lumo theme is the original Vaadin theme. It provides styles for all Vaadin components, CSS properties for customization, and optional utility classes.

Jmix adds its own Lumo stylesheet for Jmix components and standard Jmix views.

Applying Lumo

A Lumo application loads styles in the following order:

  1. The Vaadin Lumo stylesheet provides styles for Vaadin components.

  2. The Jmix Lumo stylesheet provides styles for Jmix components and standard Jmix views.

  3. The application stylesheet provides project-specific styles.

The order matters because styles loaded later can override styles loaded earlier. Each layer corresponds to a @StyleSheet annotation:

@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(JmixLumo.STYLESHEET)
@StyleSheet("themes/my-project-lumo/styles.css")
public class MyProjectApplication implements AppShellConfigurator {
    // ...
}

Application Files

Lumo application styles are located in:

src/main/resources/META-INF/resources/themes/my-project-lumo

See Application Styles for the complete directory structure.

Customizing Lumo

Use the Lumo Theme Editor to configure the theme and export the CSS. Use the exported properties in your application as shown below.

Lumo provides CSS properties with the --lumo- prefix. Vaadin components also provide common and component-specific properties with the --vaadin- prefix.

Add theme properties to the application CSS file in the active Lumo theme directory. For example, add them to src/main/resources/META-INF/resources/themes/my-project-lumo/my-project.css.

Set the properties on the html element to apply them to the whole application:

src/main/resources/META-INF/resources/themes/my-project-lumo/my-project.css
html {
    --lumo-primary-color: #006b57;
    --lumo-primary-text-color: #006b57;
    --lumo-font-family: Arial, sans-serif;
    --lumo-font-size-m: 14px;
    --lumo-border-radius-m: 0.5em;
}

See the Lumo documentation for the complete property reference.

See Styling UI Components for ways to style UI components.

Utility Classes

Utility classes are predefined CSS classes for common styling tasks. Lumo provides utility classes for backgrounds, borders, sizing, spacing, typography, flexbox and grid layouts, and other common styles.

Lumo utility classes are not included in Lumo.STYLESHEET. To use them, add @StyleSheet(Lumo.UTILITY_STYLESHEET) immediately after @StyleSheet(Lumo.STYLESHEET):

@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(Lumo.UTILITY_STYLESHEET)
@StyleSheet(JmixLumo.STYLESHEET)
@StyleSheet("themes/my-project-lumo/styles.css")

Apply utility classes using the classNames XML attribute instead of writing a custom CSS rule. For example, the following classes add medium spacing between the elements and medium padding around them:

<hbox classNames="gap-m p-m">
    <span text="First"/>
    <span text="Second"/>
</hbox>

See the Lumo Utility Classes reference for the complete list.

When applying Lumo utility classes in Java, use the corresponding constants from com.vaadin.flow.theme.lumo.LumoUtility.

The Jmix Lumo stylesheet also includes theme-independent Jmix utility classes. Their Java constants are defined by the io.jmix.flowui.theme.StyleUtility class.

Lumo utility classes are intended mainly for HTML elements, layout components, and custom UI structures. They cannot directly style elements inside a component’s shadow DOM. Use component properties or documented selectors for component internals. See Documented Selectors for examples.

Color Schemes

Lumo supports light and dark color schemes. See Switching Color Scheme.

Compact Preset

Lumo provides a compact preset that reduces font and component sizes. The following example adds the compact preset to a Lumo application:

@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(Lumo.COMPACT_STYLESHEET)
@StyleSheet(JmixLumo.STYLESHEET)
@StyleSheet("themes/my-project-lumo/styles.css")