Свойство 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>
Читайте также
Пустые элементы
Представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста...
Стиль элемента при верно введенных данных
Применяется к элементам форм, у которых введённое пользователем значение находится в заранее зада...
Свойство letter-spacing
Определяет интервал между символами в пределах элемента. Допустимо использовать отрицательное зна...
Свойство border-style
Устанавливает стиль границы элемента.
Свойство font
Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и те...