color-scheme

Baseline 2022

Newly available

Since February 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS-свойство color-scheme позволяет указать цветовые схемы, в которых может быть отображён текущий элемент.

Как правило, в операционных системах используется "светлые" и "тёмные" цветовые схемы, например, одна для дневного времени суток, другая — для ночного. Когда пользователь включает одну из них, операционная система подстраивает графический интерфейс под выбранную цветовую схему. К этому также относятся элементы форм, полосы прокрутки и используемые цвета системных цветов в CSS.

Синтаксис

css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

/* Глобальные значения */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

Свойство color-scheme принимает одно из следующих ключевых слов.

Значения

normal

Означает, что элемент не осведомлён о каких-либо цветовых схемах, поэтому он должен использовать цветовую схему по умолчанию.

light

Означает, что элемент может быть отображён в светлой цветовой схеме операционной системы.

dark

Означает, что элемент может быть отображён в тёмной цветовой схеме операционной системы.

Формальное определение

Начальное значениеnormal
Применяется кall elements and text
Наследуетсяда
Обработка значениякак указано
Animation typediscrete

Формальный синтаксис

color-scheme = 
  normal                                       | (en-US)
  [ (en-US) light | (en-US) dark | (en-US) <custom-ident> ] (en-US)+ (en-US) && (en-US) only? (en-US)

Примеры

Использование цветовой схемы

Чтобы применить ко всей странице текущую цветовую схему пользователя, нужно определить свойство color-scheme для элемента :root.

css
:root {
  color-scheme: light dark;
}

Спецификации

Specification
CSS Color Adjustment Module Level 1
# color-scheme-prop

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также