Введение

Вы когда-нибудь задумывались, как веб-сайты плавно переключаются между светлым и темным режимами в зависимости от ваших предпочтений? Это не волшебство — это умелое использование современных веб-технологий. В этом посте я раскрою простой, но мощный метод определения того, предпочитает ли пользователь темный режим, и как вы можете использовать эту информацию для улучшения взаимодействия с пользователем на вашем веб-сайте.

Понимание обнаружения темного режима

С ростом популярности темного режима многие веб-сайты и приложения теперь предлагают темы, соответствующие системным предпочтениям пользователя. Эта функция достигается с помощью API matchMedia в JavaScript, который позволяет веб-приложениям реагировать на изменения в медиа-запросах, например, на предпочтения цветовой схемы пользователя.

Как это работает

API matchMedia

Метод window.matchMedia позволяет оценивать медиа-запросы и адаптировать внешний вид вашего сайта в соответствии с предпочтениями пользователя. Чтобы проверить, включен ли темный режим, вы можете использовать следующую функцию JavaScript:

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

Практическая реализация

index.html

    
    



    
Hello, World!

    
    

• updateTheme Функция: эта функция проверяет предпочтения темного режима и соответствующим образом обновляет класс. Обновления в реальном времени: в matchMedia добавлен прослушиватель событий для обнаружения изменений в настройках цветовой схемы и вызов темы обновления для настройки внешнего вида в режиме реального времени.

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

Следуйте за мной на GitHub Авинаш Таре