Documentation

Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

Material Theme

A theme inspired by the original Material Design guidelines.

Material is a theme inspired by the original Material Design guidelines.

The core Material package defines the basic building blocks for component themes as CSS custom properties, also known as design tokens, such as colors, typography and other visual styles.

Apply the Material theme with the @Theme annotation:

@Theme(themeClass = Material.class)
public class Application extends SpringBootServletInitializer
                         implements AppShellConfigurator {
  ...
}

You can enable the dark mode variant by providing the variant parameter.

@Theme(themeClass = Material.class, variant = Material.DARK)
Note
In many respects, the Lumo theme offers a more feature-rich set of CSS properties than the Material theme.