Як адаптувати дизайн під 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С-Бітрікс, що гарантує якість реалізації. Зв'яжіться з нами для оцінки вашого проєкту. Отримайте консультацію щодо впровадження темної теми.