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 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.
You can find a component’s Material variants from the Material theme example site.