Проверка темы цвета системы в JavaScript

Несколько дней назад я задавался вопросом, как узнать, является ли системная тема темной или светлой в веб с помощью 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

Если вам нравится моя работа и вы хотите поддержать ее, вы можете сделать это здесь. Я буду вам очень признателен.