User Avatar

Свойство color-scheme

Описание

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

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

Синтаксис

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

Подробности

Значение Описание
normal Указывает, что элементу не известны какие-либо цветовые схемы, поэтому он должен отображаться с использованием цветовой схемы браузера по умолчанию.
light Указывает, что элемент может отображаться с использованием схемы светлых цветов операционной системы.
dark Указывает, что элемент может отображаться с использованием темной цветовой схемы операционной системы.
only Запрещает пользовательскому агенту переопределять цветовую схему элемента.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#test {
width: 300px;
padding: 10px;
background-color: white;
color: black;
color-scheme: dark;
}
</style>
<div id='test'>Далеко-далеко за словесными горами в стране.</div>
</body>
</html>

Читайте также

Стили поля с неверными значениями, выходящими из заданного диапазона

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

Пустые элементы

Представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста, пробелов или переносов строк....

Свойство outline-color

Указывает цвет внешней границы элемента.
В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не...

Стиль пройденного проверку поля формы

Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type='num...