Docs

Documentation versions (currently viewingVaadin 14)

You are viewing documentation for an older Vaadin version. View latest documentation

Color

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

Open in a
new tab
// Import all Material CSS custom properties into the global style scope
import '@vaadin/vaadin-material-styles/color';
import '@vaadin/vaadin-material-styles/typography';
// prettier-ignore

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.

Use the variant attribute of the @Theme annotation.

@Theme(value = Material.class, variant = Material.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

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:

E6C934AE-34BF-4D15-B205-6404A4435A09