Свойство CSS `color-scheme`

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

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

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

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

Попробуйте

color-scheme: normal;

color-scheme: dark;

color-scheme: light;

<section class="default-example container" id="default-example">
  <textarea id="example-element">Text Area</textarea>
</section>

#example-element {
  width: 80%;
  height: 50%;
}

Синтаксис

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;

Значения

Это свойство задаётся одним из следующих ключевых слов:

normal

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

light

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

dark

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

only

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

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

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

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

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;
}

Вместе с приведённым выше CSS добавьте HTML-тег <meta name="color-scheme"> <meta> в раздел <head> перед любой информацией о стилях CSS, чтобы сообщить пользовательским агентам о предпочтительной цветовой схеме и предотвратить нежелательное мигание экрана при загрузке страницы.

Стилизация с учётом цветовых схем

Чтобы задавать стили элементов с учётом предпочтений цветовой схемы, используйте медизапрос 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);
}

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

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

См. также

• 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
• Использование относительных цветов