Посетитель заходит на сайт ночью, а интерфейс слепит белым фоном. Если переключение на тёмную тему реализовано криво — сначала показывается белый экран, потом резко темнеет (FOUC). Пользователь покидает такой сайт за 3 секунды. Мы настраиваем dark mode для 1С-Битрикс так, чтобы переключение было плавным, выбор запоминался, а компоненты не ломались. Предлагаем готовое решение «под ключ» с гарантией 12 месяцев. Закажите консультацию — оценим проект за 2 часа.
Как мы реализуем dark mode под ключ?
Процесс занимает 2–3 дня. Сначала анализируем текущий шаблон: какие цвета, шрифты, изображения используются. Затем переводим все цвета на CSS-переменные. У нас уже есть проверенная система из 20+ переменных для базовых элементов (фон, текст, акценты, границы). Это быстрее, чем разработка с нуля. На одном из проектов с каталогом на 50 000 товаров экономия времени на разработку составила около 30% — за счёт повторного использования переменных и отказ от переопределения селекторов.
Ключевая особенность — скрипт определения темы загружается инлайн до стилей. Без этого возникает FOUC. Мы вставляем его в header.php сразу после <head>:
<head> <meta charset="UTF-8"> <script> (function() { const t = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', t); })(); </script> <?php $APPLICATION->ShowHead(); ?> </head> Скрипт моментально устанавливает атрибут data-theme на корневом элементе, и все стили применяются без задержки. Так вы избегаете характерной белой вспышки даже на медленных устройствах.
Почему CSS-переменные, а не классы?
Альтернативный подход — добавлять класс .dark на body и переопределять стили через специфичность. Но это приводит к дублированию кода и усложняет поддержку. CSS-переменные работают быстрее (браузер не пересчитывает селекторы) и позволяют менять тему простым переопределением в одном месте. По нашим тестам, скорость рендеринга улучшается на 10–15%. Стоимость внедрения на переменных сопоставима, но поддержка в долгосрочной перспективе значительно дешевле.
| Подход | Скорость | Поддержка браузеров | Сложность миграции |
|---|---|---|---|
| CSS-переменные | Высокая | Современные (96%+) | Низкая (меняем только значения) |
| Class-based | Средняя | Все включая IE11 | Высокая (переопределяем каждый селектор) |
| Отдельный CSS-файл | Низкая | Все | Высокая (дублирование кода) |
Мы рекомендуем CSS-переменные. Для IE11 — graceful degradation без тёмной темы. Подробнее о CSS custom properties читайте на MDN.
Как избежать FOUC при загрузке страницы?
FOUC — главная проблема dark mode. Если стили тёмной темы подгружаются асинхронно или после рендеринга, пользователь видит вспышку белого экрана. Наше решение: скрипт в <head> (см. выше) устанавливает data-theme до загрузки CSS. Все стили используют var(--color-xxx), которые определены под каждый атрибут.
Адаптация изображений и компонентов
Стандартные блоки Битрикса (.bx-sls, .popup-window-content, форма авторизации) имеют свои стили. Мы переопределяем их через селектор с data-theme:
:root[data-theme="dark"] .bx-sls { background: var(--color-card-bg); color: var(--color-text); } :root[data-theme="dark"] .popup-window-content { background: var(--color-bg); border-color: var(--color-border); } Для изображений используем <picture> или CSS-фильтры. Лучше сразу подготовить тёмный вариант логотипа и вставлять его через prefers-color-scheme. Логотипы с прозрачностью требуют отдельной версии. Для иконок можно применить CSS-фильтр invert(1) на светлом фоне, но на тёмном результат может быть нечитаем. Рекомендуем подготовить два набора иконок: светлый и тёмный. Фоны с градиентами лучше переопределять через CSS-переменные.
Типичные ошибки при внедрении
Первая ошибка — забыть про компоненты, которые рендерятся асинхронно (например, корзина в попапе). Вторая — не обработать изображения с инлайн-стилями. Третья — не сохранять выбор темы в профиле авторизованного пользователя Битрикс, из-за чего после выхода настройка сбрасывается. Все эти кейсы мы закрываем на этапе тестирования.
Что входит в работу
- Аудит текущих стилей и компонентов
- Перевод цветов на CSS-переменные (основной файл + компоненты)
- Инлайн-скрипт определения темы (без FOUC)
- Кнопка переключения темы (десктоп + мобильный)
- Сохранение выбора в localStorage и авторизованном профиле (Bitrix)
- Адаптация изображений (логотипы, иконки, фоны)
- Переопределение стандартных компонентов: умный поиск, popups, авторизация
- Тестирование в Chrome, Firefox, Safari, Edge
- Документация по переменным и API
- Обучение контент-менеджеров
Этапы и сроки
| Этап | Время |
|---|---|
| Аудит и проектирование | 1–2 ч |
| Перевод стилей на переменные | 6–12 ч |
| Скрипт и логика переключения | 2–3 ч |
| Адаптация изображений | 2–4 ч |
| Переопределение компонентов | 3–6 ч |
| Тестирование и правки | 2–3 ч |
Итого от 2 до 3 дней в зависимости от сложности шаблона. Свяжитесь с нами для предварительной оценки — займёт не больше часа. Опыт работы с Битрикс — 8+ лет, более 50 реализованных проектов. Даём гарантию 12 месяцев на все работы. Закажите внедрение dark mode уже сегодня.