Определяем цветовую схему посетителя сайта

6 август 2022

В последнее время очень большую популярность набирают так называемая «темная тема», т.е. цветовая схема приложения использующая преимущественно темные оттенки. Данный тренд поддерживают все соцсети, мессенджеры и очень многие десктопные и мобильные приложения. Да чего там, последние версии macOS и Windows имеют встроенный темный режим на уровне системы.

Модное веяние или необходимая функция?

Большинство профессиональных программистов используют IDE и другие редакторы кода с тёмной темой по умолчанию. И это не явление последних пары лет, а статистика за десятилетия. Связанно это с тем, что разработчики, девопсы и прочие сисадмины круглые сутки проводят уткнувшись в монитор, от чего очень сильно устают глаза, особенно в тёмное время суток.

Тренды же последнего времени напрямую связаны с OLED-дисплеями на смартфонах, которые значительно экономят расход батареи при использовании темной темы. Также во многих компаниях уверены, что тёмная тема помогает сконцентрироваться на работе и снимает напряжение с глаз.

Темная тема IDE
Темная тема смартфона

Как же определить цветовую схему пользователя?

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.

Выводы

Тёмная тема — удобная опция, к которой многие пользователи уже привыкли. И воспринимается теперь тёмный режим, как нечто само собой разумеющееся. Поэтому сегодня имеет смысл дополнительно разрабатывать тёмную тему. Она повысит лояльность посетителей и пользовательские метрики.

Другие наши статьи

5 основных источников трафика
5 основных источников трафика
Создавая новый сайт в интернете, владелец преследует какие либо определённые цели. Как правило, это могут быть продажи товаров или услуг,…
Ссылочное продвижение (линкбилдинг)
Ссылочное продвижение (линкбилдинг)
Алгоритмы поисковых систем имеют сотни различных факторов для качественного ранжирования сайтов по ключевым запросам. В этой статье хотелось…
40 онлайн инструментов для веб-дизайнера и верстальщика
40 онлайн инструментов для веб-дизайнера и верстальщика
У каждого дизайнера, верстальщика, разработчика, да и любого it-специалиста есть набор закладок с полезными сервисами или шпаргалками,…
SERM и ORM: что это и в чём разница?
SERM и ORM: что это и в чём разница?
Пандемия ковида заставила многих предпринимателей активно заняться собственным сайтом, онлайн-продажами и продвижением услуг в интернете. Помимо…