color-scheme

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2022.

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                                       |
  [ light | dark | <custom-ident> ]+ && only?

Примеры

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

Чтобы применить ко всей странице текущую цветовую схему пользователя, нужно определить свойство 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

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