Documentation

Documentation versions (currently viewingVaadin 24)

Material Theme

Information on the Material theme, which is not being developed further.

In addition to the Lumo theme, Vaadin components include a built-in Material theme, inspired by the original Material Design system by Google.

Although this theme is no longer actively developed, it is still supported in Vaadin 24 for legacy purposes, but not recommended for new applications.

The theme can be applied using the @Theme annotation:

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

Like Lumo, it has a dark variant applied in a similar manner:

@Theme(themeClass = Material.class, variant = Material.DARK)
public class Application implements AppShellConfigurator {
    …
}

The Material theme can be customized using a set of style properties for typography and color.

Topics

Typography
Material theme style properties related to displaying and formatting text.
Color
Tables of colors used in the Material theme.