Свойство 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>Читайте также
Свойство width
Устанавливает ширину содержимого элемента. По умолчанию ширина зависит от типа элемента: блочные занимают всю доступную ширину; ширина строчно-блочных...
Свойство border-color
Позволяет задать цвет границы сразу для всех сторон элемента или только для указанных....
Свойство border-bottom-right-radius
Устанавливает радиус скругления правого нижнего угла рамки.
Если рамка не задана, то скругление также происходит и с фоном....
Свойство text-emphasis
Сокращённое свойство, позволяющее установить значения свойств text-emphasis-style и text-emphasis-color одновременно....