"Тёмный режим" или "тёмная тема" в последние пару лет является очень актуальной тенденцией в разработке мобильных приложений.
"Тёмная тема" незаслуженно забыта при разработке веб-сайтов, а ведь адаптировать любой сайт под тёмную тему можно буквально парой строк html + css + js кода.
В данной заметке рассмотрим вопрос - как правильно адаптировать свой веб-сайт под тёмный режим, как автоматически переключать сайт в тёмный режим в случае, если у посетителя сайта на устройстве выбрана тёмная тема.
В css спецификации есть медиа запрос prefers-color-scheme, который на данный момент поддерживается практически всеми популярными браузерами.
С помощью данного css свойства Вы можете узнать, какая тема выбрана в настройках устройства, с которого зашёл посетитель на Ваш сайт.
Простой пример на css:
Если у посетителя выбрана светлая тема - то цвет фона ставим белый, цвет текста - чёрный.
Если у посетителя выбрана тёмная тема - то цвет фона ставим чёрный, цвет текста - белый.
Добавим css переменных:
И подключим наши css стили для тёмной и светлой темы:
Всё, в зависимости от настроек устройства пользователя, Ваш сайт будет отображаться либо в свётлых тонах (light.css), либо в тёмных (dark.css).
Более наглядный рабочий пример можно посмотреть по ссылке https://demo.vamshop.ru
Переключатель темы сверху:
Всё автоматически, в зависимости от настроек Вашего устройства (смартфона, планшета, телевизора, ноутбука, компьютера) выбирается либо тёмная, либо светлая тема.
Кроме того, если Вам не нравится тот или иной вариант, Вы можете сменить тему: тёмную на светлую и светлую на тёмную.
Ваш выбор сохраняется. При следующем входе будет открыта та тема, которую Вы выбрали вручную.