как определить темный режим в javascript для динамической стилизации

Для определения темного режима в JavaScript для динамической стилизации можно использовать медиа-запросы для проверки того, какая тема оформления установлена на устройстве пользователя. Для этого прежде всего нужно иметь поддержку медиа-запросов в CSS для темной темы.

Вот пример кода, который позволит определить темный режим в JavaScript:

// Функция для проверки поддержки темной темы
function preferDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

// Проверяем, если на устройстве пользователя установлена темная тема
if (preferDarkMode()) {
    // Здесь можно добавить класс или стили для темной темы
    // Например:
    // document.body.classList.add('dark-mode');
} else {
    // Здесь можно добавить класс или стили для светлой темы
    // Например:
    // document.body.classList.add('light-mode');
}

В этом коде мы используем функцию preferDarkMode(), которая использует window.matchMedia для проверки, установлена ли на устройстве пользователя темная тема. После этого мы можем добавить соответствующие классы или стили в зависимости от результатов проверки.

Помимо использования медиа-запросов, можно также позволить пользователям выбирать тему вручную и сохранять их предпочтения в localStorage или cookies. Таким образом, при следующем посещении сайта, мы можем загрузить и применить выбранную пользователем тему.