Проверка темы цвета системы в 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


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

Оцените статью
devanswers.ru
Добавить комментарий