Documentation

Documentation

Lumo Variants

Understanding and utilizing the built-in light, dark, and compact variants in Lumo.

The Lumo theme comes in two color variants: light (default) and dark, as well as a compact preset that can be applied simultaneously with the color variants. These are essentially predefined customizations of Lumo’s style properties.

Light & Dark Variants

Lumo comes in two built-in color variants: the default light variant, and a dark variant.

Lumo theme Light and Dark variants

The dark variant can be applied statically to the entire UI using the @Theme annotation on the class that implements the AppShellConfigurator interface:

@Theme(variant = Lumo.DARK)
public class Application extends implements AppShellConfigurator {
  ...
}
Tip
Customize Dark Variant Colors
You can customize the colors for the dark theme variant as well. See Lumo Colors for details.

The variant can also be applied only to certain parts of the UI, including individual components, through the ThemeList or Element API, depending on the component:

VerticalLayout layout = new VerticalLayout();
layout.getThemeList().add(Lumo.DARK);

Div div = new Div();
div.getElement().setAttribute("theme", Lumo.DARK);

In addition to applying the dark variant statically, applications can allow the user to switch between the light and dark variants by dynamically applying them to the UI class:

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        Button toggleButton = new Button("Toggle theme variant", click -> {
            ThemeList themeList = UI.getCurrent().getElement().getThemeList();

            if (themeList.contains(Lumo.DARK)) {
                themeList.remove(Lumo.DARK);
            } else {
                themeList.add(Lumo.DARK);
            }
        });

        add(toggleButton);
    }
}

The dark variant can also be applied automatically based on the operating system’s light/dark mode setting. It’s exposed to the browser through the prefers-color-scheme CSS feature.

Compact Preset

Lumo also has a compact preset that applies reduced sizing to fonts and all Vaadin components. It is applied by loading an additional JavaScript module containing a modified set of Lumo sizing properties:

@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js")
public class MainLayout extends VerticalLayout {
  ...
}

6edf45a5-74c9-4775-a0ad-48d822264ffe