Відвідувач заходить на сайт вночі, а інтерфейс сліпить білим фоном. Якщо перемикання на темну тему реалізовано криво — спочатку показується білий екран, потім різко темніє (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 вже сьогодні.