@vaadin/vaadin-lumo-styles/src/global/color-scheme.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
:where(:root),
:where(:host) {
  color: var(--lumo-body-text-color);
  background-color: var(--lumo-base-color);
  color-scheme: light;
}

:host([theme~='dark']),
[theme~='dark'] {
  color-scheme: dark;

  /* Dark fallbacks for backwards compatibility: ensures users who only overrode
     the light value of a variable still get a proper dark value. Without these,
     a light-only override (e.g. html { --lumo-base-color: pink }) would apply
     to both modes since color.css uses light-dark() on :where(:root). */

  /* Base (background) */
  --lumo-base-color: hsl(214, 35%, 21%);

  /* Tint */
  --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
  --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
  --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
  --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
  --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
  --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
  --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
  --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
  --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
  --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
  --lumo-tint: hsl(214, 100%, 98%);

  /* Shade */
  --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
  --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
  --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
  --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
  --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
  --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
  --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
  --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
  --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
  --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
  --lumo-shade: hsl(214, 33%, 13%);

  /* Contrast */
  --lumo-contrast-5pct: var(--lumo-tint-5pct);
  --lumo-contrast-10pct: var(--lumo-tint-10pct);
  --lumo-contrast-20pct: var(--lumo-tint-20pct);
  --lumo-contrast-30pct: var(--lumo-tint-30pct);
  --lumo-contrast-40pct: var(--lumo-tint-40pct);
  --lumo-contrast-50pct: var(--lumo-tint-50pct);
  --lumo-contrast-60pct: var(--lumo-tint-60pct);
  --lumo-contrast-70pct: var(--lumo-tint-70pct);
  --lumo-contrast-80pct: var(--lumo-tint-80pct);
  --lumo-contrast-90pct: var(--lumo-tint-90pct);
  --lumo-contrast: var(--lumo-tint);

  /* Text */
  --lumo-header-text-color: var(--lumo-contrast);
  --lumo-body-text-color: var(--lumo-contrast-90pct);
  --lumo-secondary-text-color: var(--lumo-contrast-70pct);
  --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
  --lumo-disabled-text-color: var(--lumo-contrast-30pct);

  /* Primary */
  --lumo-primary-color: hsl(214, 90%, 48%);
  --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
  --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
  --lumo-primary-text-color: hsl(214, 90%, 77%);
  --lumo-primary-contrast-color: #fff;

  /* Error */
  --lumo-error-color: hsl(3, 79%, 49%);
  --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
  --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
  --lumo-error-text-color: hsl(3, 100%, 80%);

  /* Success */
  --lumo-success-color: hsl(145, 72%, 30%);
  --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
  --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
  --lumo-success-text-color: hsl(145, 85%, 46%);

  /* Warning */
  --lumo-warning-color: hsl(43, 100%, 48%);
  --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
  --lumo-warning-text-color: hsl(45, 100%, 60%);
  --lumo-warning-contrast-color: var(--lumo-shade-90pct);

  /* User colors */
  --vaadin-user-color-0: #ff66c7;
  --vaadin-user-color-1: #9d8aff;
  --vaadin-user-color-2: #8aff66;
  --vaadin-user-color-3: #ffbd66;
  --vaadin-user-color-4: #dc6bff;
  --vaadin-user-color-5: #66fffa;
  --vaadin-user-color-6: #e6ff66;

  /* Re-set registered <color> properties so they recompute in dark context.
     These are registered via CSS.registerProperty() in component-base/style-props.js
     and their values get resolved at definition time, so they won't update
     by just changing color-scheme on a subtree. */
  --vaadin-text-color: var(--lumo-body-text-color);
  --vaadin-text-color-secondary: var(--lumo-secondary-text-color);
  --vaadin-text-color-disabled: var(--lumo-disabled-text-color);
  --vaadin-border-color: var(--lumo-contrast-30pct);
  --vaadin-border-color-secondary: var(--lumo-contrast-10pct);
  --vaadin-background-color: var(--lumo-base-color);

  color: var(--lumo-body-text-color);
  background-color: var(--lumo-base-color);
}

:host([theme~='light-dark']),
[theme~='light-dark'] {
  color: var(--lumo-body-text-color);
  background-color: var(--lumo-base-color);
  color-scheme: light dark;

  /* Re-set registered <color> properties so they recompute based on system preference */
  --vaadin-text-color: var(--lumo-body-text-color);
  --vaadin-text-color-secondary: var(--lumo-secondary-text-color);
  --vaadin-text-color-disabled: var(--lumo-disabled-text-color);
  --vaadin-border-color: var(--lumo-contrast-30pct);
  --vaadin-border-color-secondary: var(--lumo-contrast-10pct);
  --vaadin-background-color: var(--lumo-base-color);
}