Material

Material is a theme inspired by the 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.

Getting Started

The Material theme comes bundled with Vaadin, including all individual components. If you need, you can also install the core Material package separately from npm.

terminal

npm i @vaadin/vaadin-material-styles

Import and Include Style Sheets

The global style sheets, which define the global custom properties (a.k.a. design tokens) and define basic color and typography rules, are automatically included in your Vaadin application when you are using Material as your theme.

You can import and include these style sheets manually if needed, for example if you are building a client-side only application.

JavaJavaScript

In server-side views (Java), use the @Theme annotation, as described in Using Themes.

UsingComponentThemes.java

Expand code

@Route(value = "")
@Theme(value = Material.class)
public class MaterialApplication extends Div {
}

Customization

The Material theme can be customized to fit your visual style requirements by adjusting the CSS Custom Properties it exposes as its public API.

The custom properties are documented in the following sections:

• Color

• Typography