Documentation versions (currently viewingVaadin 14)
You are viewing documentation for an older Vaadin version. View latest documentation

Material Variants

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

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

@Theme(value = Material.class, variant = Material.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>

Component Variants

You can find a component’s Material variants from the Material theme example site.