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
@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
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.
HTML
<vaadin-vertical-layout theme="dark"></vaadin-vertical-layout>
Component Variants
You can find a component’s Material variants from the Material theme example site.