Определяем цветовую схему посетителя сайта
В последнее время очень большую популярность набирают так называемая «темная тема», т.е. цветовая схема приложения использующая преимущественно темные оттенки. Данный тренд поддерживают все соцсети, мессенджеры и очень многие десктопные и мобильные приложения. Да чего там, последние версии macOS и Windows имеют встроенный темный режим на уровне системы.
Модное веяние или необходимая функция?
Большинство профессиональных программистов используют IDE и другие редакторы кода с тёмной темой по умолчанию. И это не явление последних пары лет, а статистика за десятилетия. Связанно это с тем, что разработчики, девопсы и прочие сисадмины круглые сутки проводят уткнувшись в монитор, от чего очень сильно устают глаза, особенно в тёмное время суток.
Тренды же последнего времени напрямую связаны с OLED-дисплеями на смартфонах, которые значительно экономят расход батареи при использовании темной темы. Также во многих компаниях уверены, что тёмная тема помогает сконцентрироваться на работе и снимает напряжение с глаз.
Как же определить цветовую схему пользователя?
CSS Media Queries
Существует спецификация CSS для медиазапросов, где указана prefers-color-scheme. Она предназначена для определения предпочтительной цветовой схемы пользователя и может иметь три различных значения: light, dark и no-preference.
Так, например, можно использовать медиа-запросы и переопределять стили для определенных классов:
.header {
display: block;
width: 100%;
height: 80px;
background: lightblue;
color: black;
}
@media (prefers-color-scheme: dark) {
.header {
background: black;
color: white;
}
}JavaScript Window.matchMedia()
Чтобы определить светлую или темную тему в JavaScript, можно использовать функцию matchMedia(), которая позволяет программно проверять, был ли выполнен медиа-запрос CSS или нет.
const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
if (darkThemeMq.matches) {
// Theme set to dark.
} else {
// Theme set to light.
}Ну, а далее уже дело техники… Можно, например, сделать переключатель темы и сохранять параметр пользователю в cookie или в storage.
Выводы
Тёмная тема — удобная опция, к которой многие пользователи уже привыкли. И воспринимается теперь тёмный режим, как нечто само собой разумеющееся. Поэтому сегодня имеет смысл дополнительно разрабатывать тёмную тему. Она повысит лояльность посетителей и пользовательские метрики.
