JavaScript: Определение используемой темы в ОС - светлая или тёмная
CSS медиа функция refers-color-scheme позволяет определить тему пользователя в операционной системе. С помощью js интерфейса веб-API Window.matchMedia() можно определить используемую тему.
<html>
<head>
<style>
@media (prefers-color-scheme: dark) {
body {
background: #333;
color: white;
}
}
@media (prefers-color-scheme: light) {
body {
background: white;
color: #555;
}
}
</style>
</head>
<body>
<p>Какая тема?</p>
<p id="scheme"></p>
<script>
let scheme = document.getElementById('scheme');
console.log( scheme );
if( window.matchMedia('(prefers-color-scheme: dark)').matches )
{
scheme.innerHTML = 'В ОС установлена тёмная тема';
}
if( window.matchMedia('(prefers-color-scheme: light)').matches )
{
scheme.innerHTML = 'В ОС установлена светлая тема';
}
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (event) => {
console.log( 'Тема изменилась на : ' + ( event.matches ? "dark" : "light" ) );
});
// > Тема изменилась на : light | dark
</script>
</body>
</html>
Комментарии