Несколько дней назад я задавался вопросом, как узнать, является ли системная тема темной или светлой в веб с помощью JavaScript, и я нашел способ определить это.
В этой статье я поделюсь реализацией, которую я использовал для проверки системной темы.
-
Мы будем использовать метод
matchMedia()
, предоставляемый оконным интерфейсом браузера. -
Метод
matchMedia
принимает в качестве параметраmediaQueryString
и возвращает объектMediaQueryList
. -
Объект
MediaQueryList
будет иметь свойствоmatches
с типом данных Boolean.
Код
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Dark Mode
}
prefers-color-scheme
— это CSS медиа свойство, используемое для определения системной цветовой темы.
Мы также можем иметь слушателя, если пользователь изменит тему между ними.
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
const theme = event.matches ? "dark" : "light";
});
Дайте мне знать в комментариях, если вы знаете какой-либо другой способ определения системной темы в веб.
Первоначально опубликовано на blog.bibekkakati.me
Спасибо, что прочитали 🙏
Если вам понравилась эта статья или вы нашли ее полезной, поставьте большой палец вверх 👍
Не стесняйтесь общаться 👋
Twitter | Instagram | LinkedIn
Если вам нравится моя работа и вы хотите поддержать ее, вы можете сделать это здесь. Я буду вам очень признателен.