Настройка тёмной темы (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 ч |