Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Lumo Variants

Lumo has global variants that you can use to quickly customize all components and built-in component variants that can be used to style individual component instances quickly.

Dark Mode

Dark mode is commonly used in low-light environments or during night-time.

Caution
 The dark variant is not supported in Internet Explorer 11. See the issue in GitHub.

In server-side views, use the variant attribute of the @Theme annotation. See Using Themes for more information.

@Theme(value = Lumo.class, variant = Lumo.DARK)

You can also use the same attribute on any element which is in the global style scope (see Style Scopes).

For server-side components, you can use the Element API to set the attribute value. Some components offer specific API for setting theme variants.

VerticalLayout dark = new VerticalLayout();
dark.getElement().setAttribute("theme", Lumo.DARK);

For client-side components/templates you can add the attribute directly to the HTML element.

<vaadin-vertical-layout theme="dark"></vaadin-vertical-layout>

Compact

The compact variant reduces the font size and the sizing and spacing of all components, allowing you to place more components on the screen.

The compact variant is applied by importing an additional style sheet, which sets new values for the Typography and Sizing and Spacing CSS properties. You can view the values from the source code.

@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js")
@Theme(Lumo.class)
public class CompactApp extends Div {
}
import '@vaadin/vaadin-lumo-styles/presets/compact.js';

Component Variants

You can find a component’s Lumo variants from its HTML examples online, from the "Theme Variants" section.

C821C699-EFE1-47ED-873A-B9055882725A