Налаштування темної теми (dark mode) сайту на 1С-Бітрікс
Темна тема на сайті — це CSS-змінні з двома наборами значень, логіка визначення уподобань користувача та збереження його вибору. Бітрікс тут не додає специфіки — це чисте фронтенд-завдання, яке потрібно акуратно вбудувати в шаблон сайту.
Архітектура CSS для двох тем
Основа — CSS custom properties (змінні). Не змінюйте кольори безпосередньо за класом .dark, а через змінні, які перевизначаються залежно від теми.
В основному CSS шаблону (/local/templates/[шаблон]/style.css):
/* Світла тема — значення за замовчуванням */
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-primary: #0066cc;
--color-border: #e0e0e0;
--color-card-bg: #f5f5f5;
--color-header-bg: #ffffff;
--color-shadow: rgba(0,0,0,0.08);
}
/* Темна тема */
:root[data-theme="dark"],
.dark-mode {
--color-bg: #121212;
--color-text: #e4e4e4;
--color-primary: #4da3ff;
--color-border: #333333;
--color-card-bg: #1e1e1e;
--color-header-bg: #1a1a1a;
--color-shadow: rgba(0,0,0,0.4);
}
/* Системні уподобання користувача */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-bg: #121212;
--color-text: #e4e4e4;
/* ... */
}
}
У всіх компонентах використовуєте змінні замість конкретних кольорів:
body { background: var(--color-bg); color: var(--color-text); }
.card { background: var(--color-card-bg); border-color: var(--color-border); }
Збереження вибору користувача
Вибір теми зберігається в localStorage, щоб зберігався між сесіями без авторизації:
// Застосовуємо тему негайно при завантаженні сторінки (до рендерингу)
// Вставляємо цей скрипт у <head> шаблону, ДО підключення CSS
(function() {
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = saved || (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
})();
Критично: цей скрипт має бути інлайновим у <head>, до завантаження стилів. Інакше при завантаженні буде миготіння — білий екран перед застосуванням темної теми (FOUC — Flash of Unstyled Content).
У шаблоні Бітрікса (header.php):
<head>
<!-- ... мета-теги ... -->
<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>
Зображення в темній темі
Логотипи та іконки часто не читаються на темному фоні. Варіанти вирішення:
Варіант 1 — CSS filter:
.dark-mode .site-logo img {
filter: brightness(0) invert(1);
}
Варіант 2 — <picture> з prefers-color-scheme:
<picture>
<source srcset="/img/logo-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/img/logo-light.svg" alt="Логотип">
</picture>
Варіант 3 — зміна атрибута src через JS при перемиканні теми.
Компоненти Бітрікса та темна тема
Стандартні компоненти Бітрікса (пагінація, форми, пошук) використовують власні стилі. Доведеться перевизначити CSS для кожного задіяного компонента. Особливо уважно з:
-
.bx-sls(розумний пошук) — має власний inline-стиль -
.popup-window-content(popups Бітрікса) - Компонент авторизації
/bitrix/components/bitrix/system.auth.form/
Перевизначаєте у своєму CSS:
:root[data-theme="dark"] .bx-sls {
background: var(--color-card-bg);
color: var(--color-text);
}
| Етап | Час |
|---|---|
| Переведення стилів на CSS-змінні | 6–12 год |
| Скрипт визначення теми та логіка перемикання | 2–3 год |
| Адаптація зображень та іконок | 2–4 год |
| Перевизначення стилів компонентів Бітрікса | 3–6 год |
| Тестування в різних браузерах та режимах | 2–3 год |