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.

JavaJavaScriptHTML

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

UsingComponentThemes.java

Expand code

  1. @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.

Java

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

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

HTML

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

Component Variants

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