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.
1C0334A4-6A37-4DDF-9344-3ADAD85039A1