Color
- Lumo
- Material
You can use these CSS Custom Properties to apply a consistent color palette across your application.
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 = Lumo.class, variant = Lumo.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 Lumo theme defines the following colors.
Base
The base color is used as the main background color for the system. The Grayscale colors are designed to be used on top of it, and the Text colors are designed to have enough contrast with it.
Description | CSS Custom Property |
---|---|
Base | --lumo-base-color: |
Grayscale
These colors form the foundation for your application colors. The grayscale colors are useful for dividing pages into sections with different backgrounds and borders, or used as text colors, for example.
Description | CSS Custom Property |
---|---|
Contrast 5% | --lumo-contrast-5pct: |
Contrast 10% | --lumo-contrast-10pct: |
Contrast 20% | --lumo-contrast-20pct: |
Contrast 30% | --lumo-contrast-30pct: |
Contrast 40% | --lumo-contrast-40pct: |
Contrast 50% | --lumo-contrast-50pct: |
Contrast 60% | --lumo-contrast-60pct: |
Contrast 70% | --lumo-contrast-70pct: |
Contrast 80% | --lumo-contrast-80pct: |
Contrast 90% | --lumo-contrast-90pct: |
Contrast 100% | --lumo-contrast: |
Primary
The most prominent color in the system. It is used to bring attention to certain elements in the interface. Accompanying text and contrast colors are also defined.
Description | CSS Custom Property |
---|---|
Primary 10% | --lumo-primary-color-10pct: |
Primary 50% | --lumo-primary-color-50pct: |
Primary 100% | --lumo-primary-color: |
Primary Text | --lumo-primary-text-color: |
Primary Contrast | --lumo-primary-contrast-color: |
Error
Most often a red color, used for error indicators, error messages and buttons that can cause permanent data loss. Accompanying text and contrast colors are also defined.
Description | CSS Custom Property |
---|---|
Error 10% | --lumo-error-color-10pct: |
Error 50% | --lumo-error-color-50pct: |
Error 100% | --lumo-error-color: |
Error Text | --lumo-error-text-color: |
Error Contrast | --lumo-error-contrast-color: |
Success
Most often a green color, used for success messages and buttons that complete a certain task. Accompanying text and contrast colors are also defined.
Description | CSS Custom Property |
---|---|
Success 10% | --lumo-success-color-10pct: |
Success 50% | --lumo-success-color-50pct: |
Success 100% | --lumo-success-color: |
Success Text | --lumo-success-text-color: |
Success Contrast | --lumo-success-contrast-color: |
Text
The following text colors have the desired contrast with the Base color.
Description | CSS Custom Property |
---|---|
Heading text | --lumo-header-text-color: |
Body text Contrast above 7:1 | --lumo-body-text-color: |
Secondary text | --lumo-secondary-text-color: |
Tertiary text Contrast above 3:1. Only use for non-essential text. Suitable for graphical elements such as icons. | --lumo-tertiary-text-color: |
Disabled text Only use for non-essential text/elements | --lumo-disabled-text-color: |
230274a2-7599-4b76-beaf-b97d21ba607e