Свойство 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>

Описание

Синтаксис

Подробности

Пример

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

Свойство vertical-align

Применяется к дочернему элементу указанного типа

Свойство list-style

Свойство left