Как определить темный режим с помощью 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 в медиа-запросе. Таким образом, когда пользователь изменяет тему на своем устройстве или браузере, ваше веб-приложение будет автоматически обновляться и соответствовать выбранной теме.