Docs

Documentation versions (currently viewingVaadin 24)

Material Color

Tables of colors used in the Material theme.

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

Description CSS Custom Property

Main Background

--material-background-color:

Secondary Background

--material-secondary-background-color:

Divider

--material-divider-color:

Disabled

--material-disabled-color:

Text

Description CSS Custom Property

Body Text

--material-body-text-color:

Secondary Text

--material-secondary-text-color:

Disabled Text

--material-disabled-text-color:

Primary

Description CSS Custom Property

Primary

--material-primary-color:

Primary Text

--material-primary-text-color:

Primary Contrast

--material-primary-contrast-color:

Error

Description CSS Custom Property

Error

--material-error-color:

Error Text

--material-error-text-color:

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