Documentation

Documentation versions (currently viewingVaadin 23)
New Acceleration Kits: Kubernetes Kit and Azure Cloud Kit. Read the blog post.

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.