Разработка адаптации дизайна под prefers-color-scheme 1С-Битрикс
prefers-color-scheme — CSS media query, которая определяет, выбрал ли пользователь тёмную тему в настройках ОС. Поддержка есть во всех современных браузерах. Задача: сайт на Битрикс должен отображаться в тёмном или светлом варианте в зависимости от системных настроек пользователя — без ручного переключателя или вместе с ним.
Подходы к реализации тёмной темы
Подход 1: Чистые CSS-переменные. Все цвета сайта определяются через CSS custom properties. При prefers-color-scheme: dark переменные переопределяются.
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-surface: #f5f5f5;
--color-border: #e0e0e0;
--color-primary: #0066cc;
--color-primary-text: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #121212;
--color-text: #e8e8e8;
--color-surface: #1e1e1e;
--color-border: #333333;
--color-primary: #4d9fff;
--color-primary-text: #000000;
}
}
Весь CSS шаблона использует только переменные, не хардкоженные значения. Это самый чистый подход, но требует переработки существующих стилей.
Подход 2: CSS-класс dark на <html>. Тёмные стили активируются классом:
html.dark {
--color-bg: #121212;
/* ... */
}
JavaScript переключает класс в зависимости от системных настроек и предпочтения пользователя (сохранённого в localStorage):
(function() {
const savedTheme = localStorage.getItem('theme');
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDark = savedTheme ? savedTheme === 'dark' : systemDark;
if (isDark) document.documentElement.classList.add('dark');
// Слушаем изменение системной темы
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) { // Только если нет ручного выбора
document.documentElement.classList.toggle('dark', e.matches);
}
});
})();
Этот скрипт должен выполняться синхронно в <head> до рендера DOM, иначе будет мигание (flash of wrong theme, FOWT).
В Битрикс добавляем в header.php шаблона сайта перед </head>:
<script>
<?php
// Инлайним скрипт темы минифицированным
echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/local/js/theme-init.min.js');
?>
</script>
Переключатель темы в интерфейсе
Кнопка в шапке сайта переключает тему вручную, переопределяя системные настройки:
document.getElementById('theme-toggle').addEventListener('click', function() {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
this.setAttribute('aria-label', isDark ? 'Светлая тема' : 'Тёмная тема');
});
Иконка кнопки меняется CSS-переменными или через псевдоэлемент с разным content в зависимости от класса.
Работа с изображениями
Для логотипа и иконок, которые плохо смотрятся на тёмном фоне, используем HTML-тег <picture> с атрибутом media:
<picture>
<source srcset="/img/logo-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/img/logo-light.svg" alt="Логотип" id="site-logo">
</picture>
При переключателе — JavaScript обновляет атрибут src элемента <img>.
Изображения товаров
Фотографии товаров на тёмном фоне часто выглядят нормально. Но если фотографии на белом фоне — в тёмной теме выглядят аляповато. Решение:
@media (prefers-color-scheme: dark) {
.product-image img {
mix-blend-mode: multiply; /* убирает белый фон у PNG */
}
}
Или CSS-фильтр для смягчения:
html.dark .product-image img {
filter: brightness(0.9) contrast(1.05);
}
Цвета в компонентах Битрикс
При правке стилей стандартных компонентов (каталог, корзина, поиск) нужно добавить тёмные варианты для каждого компонента. Стратегия: создаём отдельный файл _dark-theme.scss (или _dark-theme.css), который подключается после основных стилей и переопределяет только то, что нужно для тёмного режима.
Шаблонизация в Битрикс
В шаблонах компонентов используем CSS-переменные вместо хардкода:
<!-- Было -->
<div style="background: #fff; color: #333;">
<!-- Стало -->
<div style="background: var(--color-surface); color: var(--color-text);">
Для инлайн-стилей, генерируемых в PHP, цвета берём из конфигурации:
$bgColor = 'var(--color-surface)'; // Не хардкодим #ffffff
Тестирование
- Chrome DevTools: вкладка Rendering → Emulate CSS media feature
prefers-color-scheme - Переключение темы в ОС (Windows: Персонализация → Цвета, macOS: Системные настройки → Основные)
- Проверка отсутствия FOWT — при отключённом кэше браузера
Сроки
| Этап | Срок |
|---|---|
| Аудит текущих стилей и выделение цветовых переменных | 2 дня |
| Разработка палитры тёмной темы | 1 день |
| Реализация CSS-переменных и медиазапроса | 2–3 дня |
| Инициализационный скрипт + переключатель | 1 день |
| Правка изображений и иконок | 1 день |
| Тестирование во всех браузерах | 1 день |
| Итого | 8–10 дней |