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 night-time. 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");

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

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: