Переходим на тёмную сторону!

"Тёмный режим" или "тёмная тема" в последние пару лет является очень актуальной тенденцией в разработке мобильных приложений.

"Тёмная тема" незаслуженно забыта при разработке веб-сайтов, а ведь адаптировать любой сайт под тёмную тему можно буквально парой строк html + css + js кода.

В данной заметке рассмотрим вопрос - как правильно адаптировать свой веб-сайт под тёмный режим, как автоматически переключать сайт в тёмный режим в случае, если у посетителя сайта на устройстве выбрана тёмная тема.

В css спецификации есть медиа запрос prefers-color-scheme, который на данный момент поддерживается практически всеми популярными браузерами.

caniuse.com

Can I use... Support tables for HTML5, CSS3, etc

С помощью данного css свойства Вы можете узнать, какая тема выбрана в настройках устройства, с которого зашёл посетитель на Ваш сайт.

Простой пример на css:

/* Light mode */ @media (prefers-color-scheme: light) { html { background: white; color: black; } } /* Dark mode */ @media (prefers-color-scheme: dark) { html { background: black; color: white; } }

Если у посетителя выбрана светлая тема - то цвет фона ставим белый, цвет текста - чёрный.

Если у посетителя выбрана тёмная тема - то цвет фона ставим чёрный, цвет текста - белый.

Добавим css переменных:

/* Light mode */ @media (prefers-color-scheme: light) { :root { --color-scheme-background: white; --color-scheme-text-color: black; } } /* Dark mode */ @media (prefers-color-scheme: dark) { :root { --color-scheme-background: black; --color-scheme-text-color: white; } } /* Usage */ html { background: var(--color-scheme-background); color: var(--color-scheme-text-color); }

И подключим наши css стили для тёмной и светлой темы:

Всё, в зависимости от настроек устройства пользователя, Ваш сайт будет отображаться либо в свётлых тонах (light.css), либо в тёмных (dark.css).

Более наглядный рабочий пример можно посмотреть по ссылке https://demo.vamshop.ru

Переключатель темы сверху:

Всё автоматически, в зависимости от настроек Вашего устройства (смартфона, планшета, телевизора, ноутбука, компьютера) выбирается либо тёмная, либо светлая тема.

Кроме того, если Вам не нравится тот или иной вариант, Вы можете сменить тему: тёмную на светлую и светлую на тёмную.

Ваш выбор сохраняется. При следующем входе будет открыта та тема, которую Вы выбрали вручную.

#тёмнаятема #тёмныйрежим #darktheme #darkmode