Допустим в браузере некоторых мобильных устройствах, и даже на некоторых десктопных браузерах, есть светлая или тёмная тема, вот мне нравится тёмная тема, она меньше давит мне на глаза, больше держит аккумуляторы, раньше я думал что нужно было устанавливать background, а оказывается всё просто, в @media есть свойство prefers-color-scheme, если тёмная тема то dark, если светлая то light. Вот небольшой пример:
Код:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-weight:bold; font-size:2em; }
@media (prefers-color-scheme: light) {
body { color:#000; background-color:#fff; }
#theme::after { content:"Light Theme" }
}
@media (prefers-color-scheme: dark) {
body { color:#000; background-color:#fff; }
#theme::after { content:"Dark Theme" }
}
</style>
</head>
<body>
<div id="theme"></div>
</body>
</html>