Оформление сайта в зависимости от цветовой схемы ОС

В последнийх версиях основных ОС - Windows 10, Mac OS 10.14+ можно использовать темную, или светлую цветовую схему. Эта цветовая схема работает для всех (ну почти) приложений, в том числе и браузера. В зависимости от цветовой схемы ОС можно оформить и сайт, таким образом сделать сайта более соответствующим предпочтениям пользователя - раз, два - решить собственный вопрос выбора цветовой схемы сайта.

Цветовых схем - две light (светлая) и dark (темная). Есть еще вариант no-preference, означающий, что цветовая схема не выбрана, но этот вариант в общем то не интересен. Для указания различных свойств CSS в зависимости от цветовой схемы используем медиа запросы:

@media (prefers-color-scheme: dark) {
/* Здесь CSS */
}

или

@media (prefers-color-scheme: light) {
/* Здесь CSS */
}

Для примера сделаю небольшой блок, основные цвета - светлые, а для цветовой схемы "dark" свойства пропишу отдельно.

HTML

<div class="demo-box-center">
	<ul class="demo-menu">
		<li>Главная</li>
		<li>Каталог</li>
		<li>Страница</li>
	</ul>
	<div class="demo-content">
		<p>Содержимое блока</p>
	</div>
	<div class="demo-footer">
		<p>© Пример</p>
	</div>
</div>

CSS

.demo-box-center {max-width:500px;margin:0px auto;background: linear-gradient(60deg, #f1f1f1, rgb(208, 208, 208), #f1f1f1);}
.demo-menu {background: #dadada;margin:0px;padding:0px;}
.demo-menu li {display:inline-block;padding:5px 10px;color:#000;}
.demo-content {width:80%;margin:5px auto;padding:10px;box-sizing:border-box;background: #fff;}
.demo-footer {color:#fff;text-align:center;background: #dadada;padding:5px;color:#000;}
@media (prefers-color-scheme: dark) {
	.demo-box-center {background: linear-gradient(60deg, #23130b, rgb(0, 0, 0), rgb(16, 45, 24));}
	.demo-menu {background: #353535;}
	.demo-menu li {color: #fff;}
	.demo-footer {background: #353535;color: #dadada}
}

Результат (что бы увидеть разницу - переключите цветувую схему)

Проверял в Windows 10 (хром, мозила) и Mac OS 10.15 (хром, сафари) - работает.. в общем то в свежих версиях всех браузеров (за исключением IE, но и свежим его сложно назвать) - должно работать.

И еще, в дополнение, определение цветовой схемы с помощью JS:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
/* Здесь некий код, выполняемый для темной схемы */
}

С помощью JS, например, можно определить схему и добавить некий класс для body, после чего прописать нужные свойства элементам, добавив этот класс. Таким образом обеспечить поддержку большего числа браузеров.