«Давайте сделаем тёмную тему, это же модно и глаза меньше устают» — фраза, которая звучит на многих проектах. Звучит разумно: телефоны и операционные системы давно умеют переключаться в тёмный режим, и пользователи к нему привыкли. Но за простым тумблером «светло/темно» скрывается серьёзная дизайнерская и инженерная работа, которая продолжается весь жизненный цикл сайта, а не заканчивается на релизе.
В этой статье разберём трезво: стоит ли делать тёмную тему интернет-магазину на 1С-Битрикс. Посмотрим на реальные плюсы и минусы, технику реализации через CSS-переменные и prefers-color-scheme, отдельную боль с товарными фото, стоимость поддержки и ситуации, когда игра стоит свеч. Если вы взвешиваете такое улучшение вместе с общей оптимизацией магазина, эта статья поможет принять решение осознанно.
Коротко
- Тёмная тема не повышает конверсию напрямую — это про восприятие бренда и комфорт части аудитории.
- Это не инверсия цветов, а отдельная дизайн-система: тёмно-серые фоны, приглушённый текст, пересчитанные акценты.
- Главная сложность — товарные фото на белом фоне; их нужно решать отдельно.
- Вторая тема — постоянные затраты на тестирование каждого нового блока, письма и лендинга.
Зачем вообще тёмная тема
Тёмная тема стала массовой привычкой: операционные системы, мессенджеры и соцсети предлагают её по умолчанию, и часть пользователей включает тёмный режим на уровне устройства. Для них светлый сайт в тёмном окружении выглядит как вспышка. Отсюда ожидание, что «приличный» сайт умеет подстраиваться.
Но для интернет-магазина важно отделять эмоцию от эффекта. Тёмная тема улучшает субъективный комфорт и может добавить бренду ощущение современности. Однако она не решает коммерческих задач сама по себе: покупают из-за цены, наличия, доверия и удобства оформления, а не из-за цвета фона. Поэтому решение о тёмной теме — это вопрос приоритетов, а не «модно/немодно».
Аргументы за и против
Чтобы решение было честным, полезно свести доводы в таблицу и оценить их применительно к своему проекту и аудитории.
| За тёмную тему | Против / риски |
|---|---|
| Комфорт для пользователей тёмного режима ОС | Не влияет на конверсию напрямую |
| Ощущение современности бренда | Удвоение объёма визуального тестирования |
| Меньше свечения экрана в тёмноте | Сложность с фото товаров на белом фоне |
| Экономия батареи на OLED-экранах | Постоянная поддержка на всём жизненном цикле |
| Плюс к имиджу «заботы о деталях» | Риск недоделанной второй темы |
Ключевой вывод из таблицы: плюсы тёмной темы в основном имиджевые и относятся к комфорту, а минусы — это реальные, повторяющиеся затраты. Значит, решение должно опираться на аудиторию и ресурсы, а не на общую моду.
Тёмная тема — это не инверсия
Главное заблуждение: «сделать тёмную тему» = «поменять белое на чёрное». Простая инверсия почти всегда даёт плохой результат. Чистый чёрный фон с чистым белым текстом создаёт резкий контраст, от которого текст «дрожит» и утомляет глаза сильнее, чем светлая тема.
Качественная тёмная тема строится по своим правилам:
- Тёмно-серые, а не чёрные фоны. Несколько уровней серого создают глубину и «слои» интерфейса.
- Приглушённый светлый текст. Не белоснежный, а слегка притушенный, чтобы снизить резкость.
- Пересчитанные акценты. Яркие в светлой теме цвета кнопок часто «кричат» на тёмном фоне и требуют другой насыщенности.
- Другие тени и границы. Тени в тёмной теме почти не видны, поэтому разделение блоков делают через фон и линии.
По сути, это второй полноценный дизайн, согласованный с первым. Именно поэтому тёмную тему нельзя «включить одной галочкой» — её нужно спроектировать.
Цветовая система на CSS-переменных
Техническая основа любой темизации — CSS-переменные (кастомные свойства). Вместо того чтобы прописывать цвета напрямую в каждом стиле, вы объявляете набор переменных (фон, текст, акцент, границы) и используете их по всему проекту. Тогда тёмная тема — это переопределение значений переменных, а не переписывание стилей.
Если проект уже построен на переменных, тёмная тема добавляется относительно дёшево. Если цвета разбросаны по коду хардкодом — сначала нужен рефакторинг стилей, и это отдельная задача, которую стоит закладывать в оценку заранее.
Определение и переключение темы
У пользователя должно быть два уровня выбора темы, и они не должны конфликтовать.
- Системная настройка. Медиазапрос
prefers-color-schemeопределяет, включён ли тёмный режим в ОС, и применяет соответствующую тему по умолчанию. - Ручной выбор. Тумблер на сайте позволяет пользователю переопределить системную настройку под себя.
- Сохранение выбора. Ручной выбор запоминается (например, в локальном хранилище) и применяется при следующих визитах.
- Раннее применение. Тема выставляется как можно раньше при загрузке, до отрисовки, чтобы не было «вспышки» неправильной темы.
Технически тема обычно фиксируется атрибутом или классом на корневом элементе (data-theme или класс на html), а стили под неё переопределяют переменные. Тумблер меняет этот атрибут и сохраняет выбор.
Товарные фото и медиа
Самая недооценённая проблема тёмной темы в магазине — это фотографии товаров. Большинство каталогов используют снимки на белом фоне: это стандарт и для маркетплейсов, и для карточек. На тёмной странице такие фото превращаются в яркие белые прямоугольники, которые ломают всю визуальную гармонию.
- Нейтральная подложка. Под фото ставят светлую карточку-контейнер, отделяя его от тёмного фона аккуратной рамкой.
- Единый фон карточки. Все изображения выводятся на одинаковом фоне, чтобы белые «заплатки» не выбивались.
- Требования к контенту. Для новых съёмок задают прозрачный или серый фон, который смотрится в обеих темах.
- Отдельная проверка. Реальные фото прогоняют в тёмной теме до релиза — макет с идеальными картинками обманчив.
Универсального решения нет: подход зависит от того, как сняты ваши товары. Но игнорировать эту проблему нельзя — именно на фото чаще всего «сыпется» красивая в макете тёмная тема.
Контраст и доступность в тёмном режиме
Тёмная тема не освобождает от требований доступности — наоборот, добавляет новую поверхность для проверки контраста. Приглушённый текст на тёмно-сером фоне легко «недотягивает» до нужного соотношения, и то, что читаемо в светлой теме, в тёмной может проваливаться.
Проверять контраст нужно отдельно в каждой теме: обычный текст, подписи, границы полей, акцентные кнопки. Отдельная ловушка — состояния фокуса и ошибок: их видимость в тёмной теме часто забывают проверить. Доступность в двух темах — это двойной объём тестирования, и его закладывают заранее.
Реализация в шаблоне 1С-Битрикс
В 1С-Битрикс темизация живёт в общем шаблоне сайта и стилях. Цветовые переменные объявляются в основном CSS, тумблер и логика переключения подключаются в шаблоне, а компоненты (каталог, корзина, умный фильтр) наследуют цвета через переменные, если их шаблоны написаны на них, а не на прямых цветах.
Особое внимание — сторонним и типовым блокам: баннерам, всплывающим окнам, письмам, элементам из готовых решений Маркетплейса. Они нередко приходят со своими «зашитыми» цветами и в тёмной теме выглядят чужеродно. Их приходится приводить к общей системе отдельно. Как аккуратно дорабатывать чужие компоненты, мы разбираем в статье про разработку решений для Маркетплейса Битрикс.
Композитный сайт и мигание темы
Отдельный технический нюанс на Битрикс — композитный сайт. Композит кэширует и мгновенно отдаёт статическую версию страницы, а динамика догружается следом. Если тему применять поздно, пользователь при каждой загрузке увидит «вспышку» светлой темы перед переключением на тёмную — неприятный эффект.
Решение — выставлять тему максимально рано, до отрисовки контента, чтобы кэшированная страница сразу показывалась в нужном режиме. Это тонкое место на стыке кэша и клиентской логики. Как устроен композит и кэширование, мы подробно описывали в материалах по архитектуре — в частности, в статье про инфраструктуру и BitrixVM, где скорость отдачи страниц напрямую влияет на восприятие.
Стоимость поддержки двух тем
Главная ошибка в оценке тёмной темы — считать её разовой задачей. На деле это постоянное обязательство. Каждый новый элемент сайта нужно проверять в двух режимах.
- Акционные лендинги и баннеры — их часто верстают быстро и «под светлую тему», а в тёмной они ломаются.
- Письма и уведомления — отдельная история со своей вёрсткой.
- Сторонние блоки из готовых решений — приходят со своими цветами.
- Новые разделы — каждый добавляет поверхность для проверки контраста и цветов.
Поэтому решение о тёмной теме — это решение поддерживать её всегда. Недоделанная вторая тема, где половина страниц «сломана», производит худшее впечатление, чем честное отсутствие тёмного режима.
Когда тёмная тема оправдана
Тёмная тема имеет смысл, когда совпадает несколько условий: у вас молодая, технологичная аудитория, которая массово пользуется тёмным режимом; проект уже построен на цветовых переменных; есть ресурс на постоянную поддержку; и товарный контент можно корректно показать на тёмном фоне.
И наоборот, для B2B-каталога, где закупщик работает с сайтом как с инструментом, тёмная тема почти всегда менее приоритетна, чем скорость поиска, наличие и удобство повторного заказа. Если бюджет ограничен, честнее направить его на функциональность и скорость, а тёмную тему отложить или заложить на будущее через переменные.
Частые ошибки
- Инверсия вместо дизайна. Автоматическое «чёрное вместо белого» без подбора серых и акцентов.
- Хардкод цветов. Цвета «зашиты» в компонентах, и тема требует правки в сотнях мест.
- Забытые товарные фото. Белые снимки «горят» на тёмном фоне, карточки выглядят грязно.
- Мигание темы. Тема применяется поздно, при каждой загрузке видна вспышка светлого.
- Провал контраста. Приглушённый текст в тёмной теме не проходит порог читаемости.
- Недоделанная вторая тема. Основные страницы поддержаны, а лендинги и письма — нет.
- Тема ради моды. Ресурсы ушли на тёмный режим вместо скорости и чекаута.
Чек-лист внедрения
- Решение обосновано. Есть аудитория и ресурс на поддержку; приоритеты не украдены у скорости и чекаута.
- Цвета на переменных. Все цвета вынесены в CSS-переменные, хардкода нет.
- Тёмная тема спроектирована. Тёмно-серые фоны, приглушённый текст, пересчитанные акценты, а не инверсия.
- Переключение работает. prefers-color-scheme по умолчанию, ручной тумблер с сохранением выбора.
- Нет мигания. Тема применяется рано, до отрисовки, в том числе на композите.
- Фото товаров решены. Подложка/рамка/единый фон, реальные снимки проверены в тёмной теме.
- Контраст проверен в двух темах. Текст, фокус, ошибки читаемы в обеих.
- Поддержка встроена в процесс. Новые блоки, письма и лендинги проверяются в двух режимах.
Вывод
Тёмная тема — приятное, но не бесплатное улучшение. Она повышает комфорт части аудитории и добавляет бренду современности, но не поднимает конверсию сама по себе и требует постоянных затрат на поддержку. Это не инверсия цветов, а вторая полноценная дизайн-система со своими фонами, акцентами и отдельной болью — товарными фото.
Правильная стратегия — не спешить с тумблером ради моды, а сначала построить цветовую систему на переменных. Тогда тёмную тему можно будет добавить осознанно, когда это оправдано аудиторией и ресурсами. А если приоритет — рост продаж, ресурсы почти всегда выгоднее вложить в скорость каталога и удобство оформления заказа.
