color-scheme
Свойство color-scheme позволяет указать предпочтительную цветовую схему для элемента — светлую или тёмную. Выбранная схема влияет на цвета полей формы, полос прокрутки, а также используемые значения системных цветов.
Для определения цветовой схемы всей веб-страницы целиком, color-scheme добавляется к псевдоклассу :root.
:root { color-scheme: light dark; }
Для указания цветовой схемы отдельных элементов, color-scheme добавляется к соответствующим селекторам.
h2 { color-scheme: light dark; }
Краткая информация
Значение по умолчанию | normal |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам |
Анимируется | Нет |
Синтаксис
color-scheme: normal | [ light | dark ]+ && only?
Значения
- normal
- Элемент не поддерживает какие-либо цветовые схемы, поэтому его следует отображать с использованием цветовой схемы браузера по умолчанию.
- light
- Элемент поддерживает светлую цветовую схему.
- dark
- Элемент поддерживает тёмную цветовую схему.
- only
- Запрещает браузеру переопределять цветовую схему элемента.
Допустимо использовать два ключевых слова light и dark, разделяя их пробелом. В этом случае цвета элемента будут меняться в зависимости от установленной темы браузера. Для изменения цвета фона формы в зависимости от темы, можно воспользоваться медиа-запросами.
:root { color-scheme: light dark; } @media (prefers-color-scheme: light) { form { background-color: #f0f0f0; /* Светло-серый цвет фона */ } } @media (prefers-color-scheme: dark) { form { background-color: #333; /* Тёмно-серый цвет фона */ accent-color: #ba84fa; /* Цвет акцента */ } }
Пример
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>color-scheme</title> <style> form { padding: 0.2em; /* Расстояние от текста до края */ } .light { color-scheme: only light; /* Только светлая схема */ background-color: #f0f0f0; /* Светло-серый цвет фона */ } .dark { color-scheme: only dark; /* Только тёмная схема */ background-color: #333; /* Тёмно-серый цвет фона */ accent-color: #ba84fa; /* Цвет акцента */ } </style> </head> <body> <form class="light"> <p> <input type="radio" name="r1" checked> <input type="radio" name="r1"> <input type="radio" name="r1"> </p> </form> <form class="dark"> <p> <input type="radio" name="r2"> <input type="radio" name="r2" checked> <input type="radio" name="r2"> </p> </form> </body> </html>
В данном примере при изменении цветовой схемы формы на тёмную переключатели также меняют цвет фона.
Объектная модель
Объект.style.colorScheme
Спецификация
CSS Color Adjustment Module Level 1
Браузеры
81 | 81 | 68 | 13 | 96 |
81 | 96 | 58 | 13 |