Color

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

Importing

Import the custom properties before using them in your style sheets.

import '@vaadin/vaadin-material-styles/color';

Dark Mode

Dark mode is commonly used in low-light environments or during nighttime. A dark-color palette is defined in addition to the default light-color palette.

Set the theme attribute on the <html> element.

document.documentElement.setAttribute("theme", "dark");

To apply the dark-color palette to a part of the application, you can also add the theme="dark" attribute to any HTML element which is in the global style scope.

Use the theme toggle button next to the docs search input to preview the dark-color palette values.

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: