You can use these CSS custom properties to apply a consistent color palette across your application.

Caution
Accessibility
The default color palette is not fully WCAG 2.0 AA level compliant. Follow the issue on GitHub.

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-lumo-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 = Lumo.class, variant = Lumo.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 Lumo theme defines the following colors.

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

export default class LumoDarkModeToggle extends DarkModeToggle {
  get styleModule() {
    return 'lumo-color';
  }

  parseCss(css: string): string {
    // Strip everything else than the first [theme~="dark"] selector to avoid global style collisions
    return `[theme~="dark"] ${css.split("[theme~='dark']")[1].split('}')[0]} }`;
  }
}

customElements.define('lumo-dark-mode-toggle', LumoDarkModeToggle);

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

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.

DescriptionCSS 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.

DescriptionCSS Custom Property

Contrast 5%
Button background. Button toolbar. Secondary section background.

--lumo-contrast-5pct:

Contrast 10%
Input field background

--lumo-contrast-10pct:

Contrast 20%
Divider border color

--lumo-contrast-20pct:

Contrast 30%
Disabled text

--lumo-contrast-30pct:

Contrast 40%

--lumo-contrast-40pct:

Contrast 50%
Tertiary text

--lumo-contrast-50pct:

Contrast 60%
Icons

--lumo-contrast-60pct:

Contrast 70%
Secondary text

--lumo-contrast-70pct:

Contrast 80%

--lumo-contrast-80pct:

Contrast 90%
Body text

--lumo-contrast-90pct:

Contrast 100%
Heading text

--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.

DescriptionCSS Custom Property

Primary 10%
Badge background

--lumo-primary-color-10pct:

Primary 50%
Focus outline color

--lumo-primary-color-50pct:

Primary 100%
Primary button background

--lumo-primary-color:

Primary Text
Secondary & tertiary button text

--lumo-primary-text-color:

Primary Contrast
Primary button text

--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.

DescriptionCSS Custom Property

Error 10%
Error badge background

--lumo-error-color-10pct:

Error 50%

--lumo-error-color-50pct:

Error 100%
Primary error button background

--lumo-error-color:

Error Text
Secondary & tertiary error button text

--lumo-error-text-color:

Error Contrast
Primary error button text

--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.

DescriptionCSS Custom Property

Success 10%
Success badge background

--lumo-success-color-10pct:

Success 50%

--lumo-success-color-50pct:

Success 100%
Primary success button background

--lumo-success-color:

Success Text
Secondary & tertiary success button text

--lumo-success-text-color:

Success Contrast
Primary success button text

--lumo-success-contrast-color:

Text

The following text colors have the desired contrast with the Base color.

DescriptionCSS Custom Property

Heading text

--lumo-header-text-color:

Body text

--lumo-body-text-color:

Secondary text

--lumo-secondary-text-color:

Tertiary text

--lumo-tertiary-text-color:

Disabled text

--lumo-disabled-text-color: