Почему не переключается dark mode?

Question

[hinie]

Здравствуйте, у меня есть код, бекграунд кнопки переключился в тенмный когда color-scheme: dark; но медиа запросы не сработали, почему?

<button>Toggle Color</button>
<p>testtext</p>

<style>
 html{
     color-scheme: dark;
}
 @media (prefers-color-scheme: dark) {
     body {
         background: grey;
    }
}
 @media (prefers-color-scheme: light) {
     body {
         background: yellow;
    }
}
</style>

Comments

[Ankhena]

Потому что https://caniuse.com/?search=color-scheme
Просто меняйте класс у body.

Answer 1

[KukuRuku]

Может так?

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // подключаем тёмную цветовую схему (dark-color.css)
}

base-color.css

:root {
  --main-bg-color: brown;
}

dark-color.css

:root {
  --main-bg-color: tomato;
}

style.css

body {
  background-color: var(--main-bg-color);
}

Или без js-проверки

:root {
  --main-bg-color: brown;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: tomato;
  }
}

body {
  background-color: var(--main-bg-color);
}