Схема цветовой гаммы

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с февраля 2022 года.

Свойство color-scheme CSS позволяет элементу указывать, в каких схемах цветов он может комфортно отображаться. Средства рендеринга изменяют следующие аспекты пользовательского интерфейса, чтобы соответствовать используемой схеме цветов:

Цвет поверхности холста.
Значения по умолчанию для полос прокрутки и других элементов пользовательского интерфейса.
Значения по умолчанию для элементов управления формами.
Значения по умолчанию для других элементов пользовательского интерфейса, предоставляемых браузером, например, подчеркивания для проверки правописания.

Авторы компонентов должны использовать медиа-функцию prefers-color-scheme, чтобы поддерживать схемы цветов на остальных элементах.

Общие варианты схем цветов операционной системы — «светлая» и «тёмная» или «дневной режим» и «ночной режим». Когда пользователь выбирает одну из этих схем цветов, операционная система вносит коррективы в пользовательский интерфейс. Это включает элементы управления формами, полосы прокрутки и используемые значения системных цветов CSS.

Попробовать

Синтаксис

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

Значение свойства color-scheme должно быть одним из следующих ключевых слов.

Значения

normal

Указывает, что элемент можно отображать, используя настройки схемы цветов страницы. Если на странице нет установленной схемы цветов, элемент отображается с использованием стандартных настроек цветов страницы.

light

Указывает, что элемент можно отображать, используя светлую схему цветов операционной системы.

dark

Указывает, что элемент можно отображать, используя тёмную схему цветов операционной системы.

only

Запрещает агенту рендеринга переопределять схему цветов для элемента.

Может использоваться для отключения переопределений цвета, вызванных функцией «Автоматическая тёмная тема» Chrome, применяя color-scheme: only light; к определенному элементу или :root.

Формальное определение

Начальное значение	`normal`
Применимо к	всем элементам и тексту
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

color-scheme = 
  normal                                       |
  [ light | dark | <custom-ident> ]+ && only?

Примеры

Указание предпочтений схемы цветов

Чтобы включить всю страницу в предпочтения схемы цветов пользователя, укажите color-scheme на элементе :root.

:root {
  color-scheme: light dark;
}

Чтобы включить определённые элементы в предпочтения схемы цветов пользователя, укажите color-scheme на этих элементах.

header {
  color-scheme: only light;
}
main {
  color-scheme: light dark;
}
footer {
  color-scheme: only dark;
}

Стиль на основе схем цветов

Чтобы стилизовать элементы на основе предпочтений схем цветов, используйте медиа-запрос prefers-color-scheme. Пример ниже включает всю страницу в использование как светлой, так и тёмной схем цветов операционной системы через свойство color-scheme и затем использует prefers-color-scheme для указания желаемых цветов фона и переднего плана для отдельных элементов в этих схемах цветов.

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}

В качестве альтернативы, используйте функцию light-dark() <color> для задания цветов фона и переднего плана для различных схем цветов, используя более компактную структуру кода:

:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

Спецификации

Спецификация
CSS Color Adjustment Module Level 1 # color-scheme-prop

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`color-scheme`	81	81	96	68	13	81	96	58	13	13.0	81
`dark`	81	81	96	68	13	81	96	58	13	13.0	81
`light`	81	81	96	68	13	81	96	58	13	13.0	81
`normal`	81	81	96	68	13	81	96	58	13	13.0	81
`only_dark`	9881–85	9881–85	96	8468–71	13	9881–85	96	6858–60	13	18.013.0–14.0	9881–85
`only_light`	9881–85	9881–85	96	8468–71	13	9881–85	96	6858–60	13	18.013.0–14.0	9881–85

См. также

prefers-color-scheme медиа-запрос для определения предпочтений пользователя для схем цветов.
light-dark() функция цвета для задания цветов для светлых и тёмных схем цветов.
Другие свойства, связанные с цветом: color, accent-color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color и column-rule-color
background-image
print-color-adjust
Использование относительных цветов

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme