"Тёмный режим" или "тёмная тема" в последние пару лет является очень актуальной тенденцией в разработке мобильных приложений.
"Тёмная тема" незаслуженно забыта при разработке веб-сайтов, а ведь адаптировать любой сайт под тёмную тему можно буквально парой строк html + css + js кода.
В данной заметке рассмотрим вопрос - как правильно адаптировать свой веб-сайт под тёмный режим, как автоматически переключать сайт в тёмный режим в случае, если у посетителя сайта на устройстве выбрана тёмная тема.
В css спецификации есть медиа запрос prefers-color-scheme, который на данный момент поддерживается практически всеми популярными браузерами.
https://caniuse.com/#search=prefers-color-scheme
С помощью данного 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 стили для тёмной и светлой темы:
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
Всё, в зависимости от настроек устройства пользователя, Ваш сайт будет отображаться либо в свётлых тонах (light.css), либо в тёмных (dark.css).
Более наглядный рабочий пример можно посмотреть по ссылке https://demo.vamshop.ru
Переключатель темы сверху:
Всё автоматически, в зависимости от настроек Вашего устройства (смартфона, планшета, телевизора, ноутбука, компьютера) выбирается либо тёмная, либо светлая тема.
Кроме того, если Вам не нравится тот или иной вариант, Вы можете сменить тему: тёмную на светлую и светлую на тёмную.
Ваш выбор сохраняется. При следующем входе будет открыта та тема, которую Вы выбрали вручную.