Color

Lumo
Material

Dark Mode
Palette
- General
- Text
- Primary
- Error

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
// tag::color[]
import '@vaadin/vaadin-material-styles/color';
// end::color[]
// tag::typography[]
import '@vaadin/vaadin-material-styles/typography';
// end::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

Docs