Как применить темную тему с учетом темы устройства на странице?

Question

[artur012097]

На сайт добавил темную тему. Добавляется с кнопки засчет добавления класса.
1.Как сделать, чтобы оно автоматом приминилась с учетом темы устройства или браузера?
2. При добавлении и переходе на другую страницу тмеа меняется на светлую не соьраняется, как это исправить?

Answer 1

[Вадим]

В купе с css переменными и выделением переменных темы в критический css
https://yandex.ru/turbo/ru.hexlet.io/s/blog/posts/...

Answer 2

[Сергей Левченко]

1) Такое возможно только в свежих браузерах, с помощью:
prefers-color-scheme + window.matchMedia
https://www.freecodecamp.org/news/how-to-detect-a-...
2) Использовать cookie или localstorage