Тёмная тема выглядит как признак современного сайта, поэтому её часто просят "чтобы было". Между тем это удвоение работы над каждым состоянием интерфейса, и польза от неё зависит от того, кто и когда открывает ваш сайт.
Мы в студии Сайты2.рф делали тёмные темы для сервисов и кабинетов и отговаривали от них на корпоративных сайтах. Ниже - когда она оправдана, как её реализовать без дублирования стилей и какие цвета брать.
Когда тёмная тема оправдана
Долгие сессии. Личный кабинет, панель управления, редактор, сервис, где человек работает часами. Здесь выбор темы это вопрос комфорта, и просят его сами пользователи.
Чтение больших текстов. Документация, база знаний, длинные статьи. Часть читателей действительно предпочитает тёмный фон вечером.
Аудитория разработчиков и дизайнеров. У них тёмная тема в системе включена почти всегда, и светлый сайт выбивается из привычной среды.
Медиа с фотографиями и видео. На тёмном фоне изображения выглядят выигрышнее, это старая практика галерей.
Когда не стоит
Корпоративный сайт, лендинг, сайт услуг, магазин. Посетитель приходит на несколько минут за конкретной информацией. Тёмная тема не влияет на его решение, зато удваивает объём проверок при каждой правке дизайна.
Ещё один довод: фирменные цвета в тёмной теме почти всегда приходится менять. Насыщенный фиолетовый, который хорошо читается на белом, на тёмном фоне выглядит грязно и требует более светлого оттенка. То есть тёмная тема - это ещё и работа с палитрой бренда.
Два способа реализации
Реакция на системную настройку. Браузер сообщает предпочтение пользователя, и сайт показывает соответствующую тему автоматически. Ничего нажимать не нужно, кода минимум.
:root {
--bg: #ffffff;
--text: #1a1a1a;
--surface: #f5f5f5;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #17161a;
--text: #e8e6e3;
--surface: #201f24;
}
}Переключатель на сайте. Пользователь выбирает тему сам, выбор запоминается. Нужен, когда предпочтение на вашем сайте может отличаться от системного.
Рабочая схема совмещает оба подхода: по умолчанию следуем системе, а выбор пользователя, если он его сделал, имеет приоритет. Технически это отметка на корневом элементе документа, которая перекрывает медиа-запрос.
Важная деталь: значение выбранной темы нужно применять до отрисовки страницы, иначе при загрузке мигнёт светлый фон. Для этого крошечный скрипт ставится в head, до подключения стилей.
Цвета: что брать вместо чёрного и белого
Ошибка новичка - фон #000000 и текст #ffffff. Такое сочетание даёт максимальный контраст, от которого текст начинает "дрожать" и читается тяжелее.
Ориентиры, которые мы используем:
- Основной фон: очень тёмный серый с лёгким оттенком, примерно #17161a, а не чистый чёрный.
- Поверхности (карточки, блоки): чуть светлее фона, разница по яркости заменяет тени.
- Основной текст: светло-серый около #e8e6e3, не чистый белый.
- Второстепенный текст: серый с достаточным контрастом, минимум 4,5 к 1 к своему фону.
- Акцентные цвета: осветлённые версии фирменных. Насыщенные тёмные оттенки на тёмном фоне не читаются.
- Границы: не белые линии, а полупрозрачный светлый цвет с малой непрозрачностью.
Тени в тёмной теме почти не работают: их не видно. Иерархию строят разницей яркости поверхностей.
Что ломается чаще всего
Логотип. Тёмный логотип на тёмном фоне исчезает. Нужна светлая версия, желательно в SVG с переключением цвета.
Картинки с белым фоном. Иллюстрации, вырезанные на белом, превращаются в яркие пятна. Варианты: делать графику с прозрачным фоном, слегка притемнять изображения в тёмной теме или показывать разные файлы для разных тем.
Скриншоты и документы. Их не переделаешь. Обычно оставляют как есть, добавляя небольшую рамку, чтобы белый прямоугольник не бил по глазам.
Тени и градиенты. Требуют отдельных значений.
Встроенные чужие блоки. Карты, видеоплееры, чаты, виджеты оплаты не знают про вашу тему. Часть из них поддерживает тёмный режим настройкой, часть нет.
Формы и системные элементы. Селекты, календари, поля ввода наследуют системные стили и в тёмной теме выглядят по-разному в разных браузерах.
Как не удвоить работу
Секрет в том, чтобы цвета жили в одном месте. Если в стилях сайта цвета описаны переменными, добавление темы - это второй набор значений этих переменных. Если цвета проставлены по месту в сотнях правил, тёмная тема превращается в переделку стилей целиком.
Наш порядок:
- Все цвета в переменных, ни одного шестнадцатеричного кода в правилах компонентов.
- Переменные не по названиям цветов, а по роли: фон, поверхность, текст основной, текст второстепенный, граница, акцент.
- Второй набор значений для тёмной темы.
- Проверка всех шаблонов, включая состояния: наведение, фокус, ошибка, отключённая кнопка.
- Проверка картинок и логотипа.
- Проверка контрастов инструментом, а не глазами.
Пункт 2 важнее остальных. Переменная с названием вида "светло-серый" в тёмной теме теряет смысл, а переменная "цвет поверхности" работает в любой теме.
Доступность и тёмная тема
Тёмная тема не заменяет доступную версию сайта. Это разные задачи: доступность - это ещё и клавиатурная навигация, подписи к картинкам, структура заголовков и работа с программой чтения. Подробно разбирали в статье про версию сайта для слабовидящих.
Более того, для части людей с нарушениями зрения тёмная тема хуже светлой: при некоторых состояниях светлый текст на тёмном фоне размывается. Поэтому правильный подход - выбор, а не замена.
И ещё: контрасты в тёмной теме нужно проверять отдельно. Пара цветов, проходящая проверку на светлом фоне, на тёмном может её не пройти.
Сколько стоит
Если сайт свёрстан аккуратно на переменных: 20 000 - 50 000 рублей и от нескольких дней до недели работы, включая проверку шаблонов.
Если цвета зашиты по месту: от 80 000 рублей, потому что сначала нужно вынести цвета в переменные. Заодно это полезная работа: дальнейшие правки дизайна станут дешевле.
В новом проекте закладывать тёмную тему сразу дешевле, чем добавлять потом, но всё равно это дополнительный объём: каждый макет придётся согласовать в двух вариантах.
Короткий вывод
Тёмная тема нужна сервисам и кабинетам, где люди проводят время, и почти не нужна сайтам, куда заходят на пять минут. Если делаете, начните с системной настройки: это дешёвая половина задачи. Переключатель добавляйте, когда есть основания думать, что предпочтение на вашем сайте отличается от системного.
Не уверены, стоит ли она затрат в вашем случае? Напишите нам через контакты: посмотрим на аналитику по устройствам и на характер сайта и скажем прямо.
