Розробка адаптації дизайну під 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);">
Для inline-стилів, що генеруються в 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 днів |