Свойство 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>
Читайте также
Свойство transform
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, ...
Селекторы атрибутов со значениями в конце
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текс...
Свойство color-scheme
Позволяет элементу указать, в каких цветовых схемах он может удобно отображаться.<br><br...
Свойство caret-color
Задаёт цвет текстового курсора, который отображается в текстовых полях формы, а также для элемент...
Свойство widows
Свойство widows задаёт минимальное число строк текста, которое располагается на следующей страниц...