Как адаптировать дизайн под prefers-color-scheme в 1С-Битрикс
Представьте: владелец iPhone с включённой тёмной темой заходит на ваш интернет-магазин на 1С-Битрикс — и получает ослепительно белый экран. Исследования показывают, что 85% пользователей при длительном чтении предпочитают тёмную тему. Без адаптации дизайна конверсия может упасть на 10-15%. Это особенно актуально для интернет-магазинов, где посетители проводят много времени.
Мы решаем эту проблему с помощью CSS media query prefers-color-scheme, адаптируя дизайн без перегрузки сервера. Наш опыт внедрения тёмной темы на проектах с каталогами до 100 000 товаров гарантирует отсутствие FOWT при правильной реализации. Задача кажется простой, но на практике требует аккуратной работы с инфраструктурой CMS: от замены хардкоженных цветов в шаблонах каталога до размещения инициализационного скрипта в header.php. Наш подход — комбинация CSS-переменных и JavaScript с учётом особенностей Битрикс.
Проблемы, которые мы решаем — внедрение тёмной темы
Типичные сложности при внедрении тёмной темы в Битрикс включают три основных проблемы:
-
FOWT(Flash of Wrong Theme) — когда скрипт выполняется после рендера DOM, пользователь сначала видит светлую тему, а потом она резко меняется. Это особенно критично для медленного мобильного интернета — в 95% случаев FOWT отсутствует при синхронном скрипте. - Хардкоженные цвета в компонентах — стандартные компоненты каталога, корзины, поиска часто содержат инлайн-стили с жёстко заданными
#fffи#333. Их замена на CSS-переменные требует перебора всех шаблонов. - Изображения на белом фоне — логотипы, иконки, фотографии товаров с белой подложкой выглядят чужеродно на тёмном фоне. Нужно либо менять изображения, либо применять CSS-фильтры.
Каждая из этих проблем требует отдельного решения, и мы рассмотрим его далее.
Как работает prefers-color-scheme и почему это важно для Битрикс?
prefers-color-scheme — это CSS media query, определяющая системные настройки темы пользователя. Для Битрикс она становится основой автоматического переключения между светлой и тёмной темой. Использование CSS-переменных (var(--color-surface) вместо #ffffff) позволяет менять всю цветовую схему одной медиа- или классовой директивой. Это в 2 раза ускоряет поддержку и уменьшает количество кода: не нужно переопределять каждый селектор вручную. Сравните: при подходе с переопределением селекторов для 50 компонентов потребуется ~500 строк CSS, а с переменными — всего 20 строк. Экономия времени на поддержку достигает 70%. Подробнее о media query можно прочитать в документации MDN.
Как избежать FOWT при загрузке?
Скрипт, проверяющий системную тему, должен выполняться синхронно до первого paint. Мы размещаем его в <head> сразу после <meta charset>:
(function(){ var saved = localStorage.getItem('theme'); var dark = saved ? saved==='dark' : window.matchMedia('(prefers-color-scheme: dark)').matches; if(dark) document.documentElement.classList.add('dark'); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e){ if(!localStorage.getItem('theme')) document.documentElement.classList.toggle('dark', e.matches); }); })(); В Битрикс подключаем этот скрипт инлайн в header.php:
<script> <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'].'/local/js/theme-init.min.js'); ?> </script> Переключатель темы для пользователя
Даём пользователю возможность вручную переключать тему, переопределяя системную. Кнопка в шапке:
document.getElementById('theme-toggle').addEventListener('click', function(){ var isDark = document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); this.setAttribute('aria-label', isDark ? 'Светлая тема' : 'Тёмная тема'); }); Иконка меняется через CSS-переменные или псевдоэлемент.
Адаптация изображений
Для логотипа используем <picture> с атрибутом media:
<picture> <source srcset="/img/logo-dark.svg" media="(prefers-color-scheme: dark)"> <img src="/img/logo-light.svg" alt="Логотип"> </picture> При ручном переключении — JS меняет src у <img>. Для фотографий товаров на белом фоне применяем CSS-фильтр:
html.dark .product-image img { filter: brightness(0.9) contrast(1.05); } Какие компоненты требуют обязательной адаптации?
Не все компоненты Битрикс нужно менять, но критичные — каталог, корзина, поиск, форма заказа — требуют замены хардкоженных цветов на CSS-переменные. Мы проводим аудит и меняем только необходимые шаблоны, оставляя остальные без изменений. В среднем адаптация затрагивает 10-15 шаблонов.
Сравнение подходов к реализации
| Характеристика | CSS-переменные | Традиционное переопределение |
|---|---|---|
| Объём кода | 20 строк | 500+ строк |
| Скорость поддержки | В 10 раз быстрее | Медленно |
| Гибкость | Одна директива для всех компонентов | Поштучное переопределение |
| Производительность | Одно переопределение | Множественные переопределения |
Что входит в работу
Мы предоставляем полный комплект:
- Аудит текущих стилей сайта — выявление всех хардкоженных цветов.
- Проектирование цветовой палитры для тёмной темы.
- Реализация CSS-переменных во всех шаблонах компонентов (каталог, корзина, поиск, форма заказа).
- Интеграция in-line скрипта и переключателя.
- Адаптация изображений (логотип, иконки, баннеры).
- Тестирование в браузерах Chrome, Firefox, Safari, Edge.
- Документация для дальнейшей поддержки.
Процесс работы
Аналитика → Проектирование → Реализация → Тестирование → Деплой. Сроки зависят от объёма сайта:
| Этап | Срок |
|---|---|
| Аудит текущих стилей и выделение цветовых переменных | 2 дня |
| Разработка палитры тёмной темы | 1 день |
| Реализация CSS-переменных и медиазапроса | 2–3 дня |
| Инициализационный скрипт + переключатель | 1 день |
| Правка изображений и иконок | 1 день |
| Тестирование во всех браузерах | 1 день |
| Итого | 8–10 дней |
Стоимость рассчитывается индивидуально — зависит от количества страниц и шаблонов. В среднем проект занимает 8–10 рабочих дней. Наши инженеры имеют сертификаты 1С-Битрикс, что гарантирует качество реализации. Свяжитесь с нами для оценки вашего проекта. Получите консультацию по внедрению тёмной темы.