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>


JavaScript CSS просмотров: 165