Color
- Lumo
- Material
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 nighttime. 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");To apply the dark-color palette to a part of the application, you can also add the theme="dark" attribute to any HTML element which is in the global style scope.
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: |