Docs

Docs

Lumo Variants

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

The Lumo theme comes with two color variants: light, which is the default; and dark. It also includes 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

In the screenshot here, you can see the difference between the default light color variant on the left, and the dark variant on the right — which are both built into Lumo.

Lumo theme Light and Dark variants

The dark variant can be applied statically to the entire UI. In Flow, this can be done by using the @Theme annotation on the class that implements the AppShellConfigurator interface. In Hilla, the same can be achieved by setting the theme attribute on the root <html> element:

@Theme(variant = Lumo.DARK)
public class Application extends implements AppShellConfigurator {
  ...
}

You can customize the colors for the dark theme variant. See Lumo Colors for details.

The variant can be restricted to certain parts of the UI, including individual components. In Flow, this can be done through the ThemeList or Element API, depending on the component.

<VerticalLayout {...{ theme: 'dark' }}></VerticalLayout>

<div {...{ theme: 'dark' }}></div>

In addition to applying the dark variant statically, applications can allow the user to switch dynamically between the light and dark variants. This is done in Flow by applying them to the UI class.

<Button
  onClick={() => {
    const root = document.documentElement;
    if (root.getAttribute('theme') === 'dark') {
      root.removeAttribute('theme');
    } else {
      root.setAttribute('theme', 'dark');
    }
  }}
>
  Toggle theme variant
</Button>

The dark variant can also be applied automatically based on the operating system’s light and 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 reduces fonts sizes — and proportionally all Vaadin components. It’s 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