Color

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

Usage

In server-side views (Flow/Java), the custom properties are imported automatically.

In client-side views (Fusion/TypeScript), you need to explicitly import the custom properties before you can use them in your style sheets.

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

Learn how to use CSS Custom Properties.

Dark Mode

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

In server-side views (Flow/Java), use the variant attribute of the @Theme annotation.

@Theme(value = Material.class, variant = Material.DARK)

In client-side views (Fusion/TypeScript), set the theme attribute on the <html> element.

document.documentElement.setAttribute("theme", "dark");
<html theme="dark">

You can also use the same attribute on any element which is in the global style scope (see Style Scopes).

Palette

The Material theme defines the following colors.

import './material-tokens';
import { DarkModeToggle } from './dark-mode-toggle';

export default class MaterialDarkModeToggle extends DarkModeToggle {
  get styleModule() {
    return 'material-color-dark';
  }

  parseCss(css: string): string {
    return css
      .replace(':host', 'html[theme~="dark"]')
      .replace('background-color: var(--material-background-color);', '')
      .replace('color: var(--material-body-text-color);', '');
  }
}

customElements.define('material-dark-mode-toggle', MaterialDarkModeToggle);

Toggles the color previews on this page between the light and dark palettes

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: