color-scheme
Сообщает браузеру, какие цветовые схемы поддерживает страница, чтобы встроенные элементы и полосы прокрутки им соответствовали.
Синтаксис
color-scheme: light dark;Значения
| Параметр | Тип | Описание |
|---|---|---|
| light | keyword | Только светлая схема. |
| dark | keyword | Только тёмная схема. |
| light dark | keyword | Обе; выбор зависит от настройки системы пользователя. |
Примеры
Элементы формы в тёмной схеме:
<div style="color-scheme: dark; background: Canvas; color: CanvasText; padding: 12px;">
<p>Built-in controls follow the dark scheme:</p>
<input placeholder="Dark field"> <button>Button</button>
<input type="checkbox" checked>
</div>Примечания
Задайте color-scheme: light dark для :root, если у сайта есть тёмная тема: поля, полосы прокрутки и фон по умолчанию подстроятся. Это же включает функцию light-dark().
См. также
- light-dark() — Выбирает один из двух цветов в зависимости от текущей цветовой схемы.
- @media — Применяет правила только при заданных условиях — ширине окна, теме системы и других.
- accent-color — Акцентный цвет встроенных элементов формы: флажков, переключателей, ползунков и индикаторов.
Вопросы и ответы по теме
В учебнике
- Тёмная тема — Как сделать тёмную тему сайта — свойство color-scheme, медиазапрос prefers-color-scheme, цвета в переменных, функция light-dark() и переключатель темы.