Тёмные/светлые темы на сайте

Когда имеет смысл делать несколько вариантов цветовой схемы сайта и лучшие практики применения.

Да-да, тема сто раз уже поднималась. Баян, автор открыл для себя интернет — всё вот это. Но я не видел статьи в ру сегменте, которая без лишней воды объединяет в себе аргументы в пользу использования тем с практикой их применения, поэтому решено это написать.

Зачем

Вот неплохая статья на хабре, там же есть и опрос, по которому видно, что большинство предпочитает тёмное оформление, при этом, мнения конкретно разделились и нет подавляющего большинства. Да, так себе выборка, скажет кто-то — всякие айтишники ≠ среднестатистический посетитель сайта (опять же, тематика сайта?).

Однако, учитывая даже этот опрос, можно сделать вывод, что пользователи светлых/тёмных тем делятся далеко не в соотношении типа 1 к 99%, когда одним процентом в принципе можно пренебречь, чтобы не вымучивать новую тему оформления. Весьма значителен процент приверженцев, как светлой, так и тёмной темы. Так что, очевидно это вполне насущный вопрос.

Почему тогда многие, в остальном технически продвинутые ресурсы не используют разные темы? И тут три варианта:

• Крупные компании.
  Зачастую проблема в том, что они неповоротливы и для каждого значимого изменения требуется херова гора согласований, изучение метрик и ЦА, понимание, как это будет внедрено во всякие UI дочерних сервисов.
• Арт-проекты.
  Вот эти всякие лендосики с вау-эффектами зачастую предполагают определённую атмосферу, которая такая, какая она есть, а если цвета перекрутить, то атмосфера всё.
  Тут особо не докопаешься, ведь ты же не обвинишь автора картины, что её общая яркость не соответствует твоим запросам?
• Те, кто не понял зачем им это.
  Собственно, в таких буду если что ссылкой на этот пост кидаться :)

Где-то читал, что если на сайте есть материалы, которые требуют для прочтения больше 10 минут, то уже нужно предоставлять посетителю максимальное удобство их прочтения.

А вот ничего подобного! Даже сайт-визитка, состоящий из 3 контактов автора, как по мне должен определять предпочитаемую цветовую схему посетителя, иначе иногда получается вот что:

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

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

Как

Как дизайнеру

Сразу делаются стили двух тем оформления, чтобы потом верстальщик это реализовал это в CSS как-то так:

:root {
  --c-brand: #00aaff;
  --c-main: #002233;
  --c-bg: #e7ebed;
}
.dark {
  --c-brand: #2f82ad;
  --c-main: #9daab1;
  --c-bg: #2d3336;
}

При этом, обе темы нужно нормально «выдрочить», независимо от того, какая тебе самому приятней. Проверяем контрасты, уместность цветов.

И вот че ещё. По UI светлых тем давно есть понимание примерно у всех, но я, как приверженец тёмных хочу показать вот че:

То есть, если делаешь тему, которую сам не используешь, всё же найди, или чела, который предпочитает эту тему, либо уж пересиль себя и потыркай её, попутно задавая себе вопросы: «а вот это читабельно?», «а вот это не вырвиглазно?» и т.п.

Как разработчику

Хорошим алгоритмом будет, как по мне такой:

function setTheme() {
  const root = document.querySelector("html");
  const themeMode = localStorage.getItem("theme");
  if (
    themeMode === "dark" ||
    (themeMode !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches)
  ) {
    root.classList.add("dark");
  } else {
    root.classList.remove("dark");
  }
}
setTheme();

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

Тут видно, что для запоминания принудительно переключенной темы пользователем используется локалсторадж, где проверяя переменную theme по необходимости вешаем класс на html.

Для ручного переключения тем вешаем на нужные события по необходимости:

localStorage.setItem('theme', 'dark'); // Выбор тёмной темы
localStorage.setItem('theme', 'light'); // Выбор светлой темы
localStorage.removeItem('theme'); // Выбор темы на основе предпочтений в системе посетителя

После инициируем setTheme(), чтобы не обновлять страницу.

See the Pen
Set color theme by Starchenkov (@Starchenkov)
on CodePen.0

Обычно локалстораджа вполне достаточно, но если на сайте у пользователей есть всякие учетные записи, то хорошей практикой будет добавление в базе данных к записям профилей инфы о выбранной теме.

Если не используется реактивный фреймворк, то обязательно этот скрипт вешать максимально вначале <head></head>, что в сочетании с рано загружаемыми основными стилями минимизирует время применения предпочитаемой схемы. По умолчанию же (если с автовыбором что-то пойдёт не так) лучше делать светлую тему, т.к. всё же такое оформление считается более привычным и традиционным.