JavaScript: Jak sprawdzić, z jakiego motywu graficznego korzysta użytkownik?

Motyw graficzny

Wiele systemów operacyjnych pozwala użytkownikowi na wybór motywu graficznego. Na przykład: jasny lub ciemny.

Istnieje możliwość pobrania informacji, jaki motyw graficzny preferuje użytkownik odwiedzający Twoją stronę internetową. Dzięki tej informacji będziesz mógł ustawić taki motyw także na stronie WWW.

Żeby sprawdzić, z jakiego motywu graficznego korzysta użytkownik, należy sprawdzić właściwość:

prefers-color-scheme

Dodatkowo można się tego dowiedzieć na dwa sposoby! Za pomocą CSS lub JavaScript

Sposób 1: CSS

// domyślny motyw - jasny
body {
  --bkg-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
	body {
		--bkg-color: black;
		--text-color: white;
	}
}

body {
  background-color: var(--bkg-color);
  color: var(--text-color);
}

Sposób 2: JavaScript

CSS:

// domyślny motyw - jasny
body {
  --bkg-color: white;
  --text-color: black;
}

body.dark {
  --bkg-color: black;
  --text-color: white;
}

body {
  background-color: var(--bkg-color);
  color: var(--text-color);
}

JavaScript:

const darkTheme = window.matchMedia('(prefers-color-scheme: dark)');

if (darkTheme.matches) { // czy użytkownik używa w systemie czarnego motywu?
  document.body.classList.add('dark');
} else {
  document.body.classList.remove('dark');
}