Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Material Color

See the "Material Design" documentation for the color system to learn more about creating and applying a consistent color theme.

Palette

The "Material" theme defines the following colors.

General

DescriptionCSS Custom Property

Main Background

--material-background-color:

Secondary Background

--material-secondary-background-color:

Divider

--material-divider-color:

Disabled

--material-disabled-color:

Text

DescriptionCSS Custom Property

Body Text

--material-body-text-color:

Secondary Text

--material-secondary-text-color:

Disabled Text

--material-disabled-text-color:

Primary

DescriptionCSS Custom Property

Primary

--material-primary-color:

Primary Text

--material-primary-text-color:

Primary Contrast

--material-primary-contrast-color:

Error

DescriptionCSS Custom Property

Error

--material-error-color:

Error Text

--material-error-text-color:

9C39A3FF-1E62-46A9-BA3B-C90C932A273F