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 январь 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 =
normal |
[ light | dark | <custom-ident> ]+ && only?
Примеры
Использование цветовой схемы
Чтобы применить ко всей странице текущую цветовую схему пользователя, нужно определить свойство color-scheme для элемента :root.
:root {
color-scheme: light dark;
}
Спецификации
| Specification |
|---|
| CSS Color Adjustment Module Level 1 # color-scheme-prop |
Совместимость с браузерами
Loading…
Смотрите также
- Применение цвета к HTML-элементам с помощью CSS
- Другие свойства, относящиеся к цвету:
color,background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color, andcolumn-rule-color background-imageprint-color-adjust