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.
Синтаксис
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 type | discrete |
Формальный синтаксис
Примеры
Использование цветовой схемы
Чтобы применить ко всей странице текущую цветовую схему пользователя, нужно определить свойство color-scheme
для элемента :root
.
:root {
color-scheme: light dark;
}
Спецификации
Specification |
---|
CSS Color Adjustment Module Level 1 # color-scheme-prop |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Применение цвета к HTML-элементам с помощью CSS
- Другие свойства, относящиеся к цвету:
color
,background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
, andcolumn-rule-color
background-image
print-color-adjust