how-to-detect-dark-mode-using-javascript.md

title	layout	categories	pubDate	description	keywords
Как определить темный режим с помощью JavaScript?	../../layouts/ArticleEntry.astro	javascript	2024-03-06	Как определить темный режим с помощью JavaScript?	javascript

Обнаружение темной темы (dark mode) с помощью JavaScript можно осуществить, используя функциональность медиа-запросов CSS и свойства window.matchMedia. Это позволяет вашему веб-сайту или веб-приложению реагировать на изменения темы, которые сделал пользователь в настройках своего устройства или браузера.

Вот пример кода, который демонстрирует, как это можно сделать:

// Функция для проверки, включен ли темный режим
function isDarkModeEnabled() {
  // Создаем медиа-запрос для проверки темной темы
  const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  
  // Возвращаем результат проверки текущего состояния медиа-запроса
  return darkModeQuery.matches;
}

// Пример использования
if (isDarkModeEnabled()) {
  // Если включен темный режим
  console.log('Темный режим включен');
} else {
  // Если темный режим выключен
  console.log('Темный режим выключен');
}

// Добавляем обработчик событий для изменения состояния темы
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  if (e.matches) {
    // Если переключились на темный режим
    console.log('Темный режим включен');
  } else {
    // Если переключились на светлую тему
    console.log('Темный режим выключен');
  }
});

Этот код включает обработку изменения темы в реальном времени, реагируя на событие change в медиа-запросе. Таким образом, когда пользователь изменяет тему на своем устройстве или браузере, ваше веб-приложение будет автоматически обновляться и соответствовать выбранной теме.