> Markdown version of [Material](https://vaadin.com/docs/v14/ds/foundation/color/material). Section index: [llms.txt](https://vaadin.com/docs/v14/ds/llms.txt)

# Material Color

See the Material Design documentation for [the color system](https://material.io/design/color/the-color-system.html), to learn more about creating and applying a consistent color theme.

`material-tokens.ts`

```typescript
// 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
```

## <a id="dark-mode"></a>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.

```java
@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.

## <a id="palette"></a>Palette

The Material theme defines the following colors.

### <a id="general"></a>General

| Description              | CSS Custom Property                   |
| ------------------------ | ------------------------------------- |
| **Main Background**      | --material-background-color           |
| **Secondary Background** | --material-secondary-background-color |
| **Divider**              | --material-divider-color              |
| **Disabled**             | --material-disabled-color             |

### <a id="text"></a>Text

| Description        | CSS Custom Property             |
| ------------------ | ------------------------------- |
| **Body Text**      | --material-body-text-color      |
| **Secondary Text** | --material-secondary-text-color |
| **Disabled Text**  | --material-disabled-text-color  |

### <a id="primary"></a>Primary

| Description          | CSS Custom Property               |
| -------------------- | --------------------------------- |
| **Primary**          | --material-primary-color          |
| **Primary Text**     | --material-primary-text-color     |
| **Primary Contrast** | --material-primary-contrast-color |

### <a id="error"></a>Error

| Description    | CSS Custom Property         |
| -------------- | --------------------------- |
| **Error**      | --material-error-color      |
| **Error Text** | --material-error-text-color |

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