color-scheme

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

Как правило, в операционных системах используется "светлые" и "тёмные" цветовые схемы, например, одна для дневного времени суток, другая — для ночного. Когда пользователь включает одну из них, операционная система подстраивает графический интерфейс под выбранную цветовую схему. К этому также относятся элементы форм, полосы прокрутки и используемые цвета системных цветов в 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 для элемента :root.

:root {
  color-scheme: light dark;
}

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

Specification
Unknown specification
# color-scheme-prop

Поддержка браузерами

BCD tables only load in the browser

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