How to adapt design for prefers-color-scheme in 1C-Bitrix
Imagine: an iPhone user with dark mode enabled visits your 1C-Bitrix online store and gets a blinding white screen. Research shows that 85% of users prefer dark theme for prolonged reading. Without design adaptation, conversion can drop by 10-15%. This is especially relevant for ecommerce sites where visitors spend a lot of time.
We solve this with the CSS media query prefers-color-scheme, adapting the design without overloading the server. Our experience deploying dark themes on projects with catalogs up to 100,000 items guarantees no FOWT with proper implementation. The task seems simple, but in practice requires careful handling of CMS infrastructure: from replacing hardcoded colors in catalog templates to placing the initialization script in header.php. Our approach combines CSS custom properties and JavaScript, considering Bitrix specifics.
Problems we solve — implementing dark theme
Typical difficulties when implementing a dark theme in Bitrix include three main issues:
-
FOWT(Flash of Wrong Theme) — when the script runs after DOM render, the user first sees the light theme and then it abruptly changes. This is especially critical for slow mobile connections — in 95% of cases, FOWT is absent with a synchronous script. - Hardcoded colors in components — standard catalog, cart, search components often contain inline styles with fixed
#fffand#333. Replacing them with CSS custom properties requires iterating through all templates. - Images on white background — logos, icons, product photos with white backing look alien on a dark background. Either change images or apply CSS filters.
Each problem requires a separate solution, which we explore next.
How prefers-color-scheme works and why it matters for Bitrix?
prefers-color-scheme is a CSS media query that detects the user's system theme settings. For Bitrix, it becomes the basis for automatic switching between light and dark themes. Using CSS custom properties (var(--color-surface) instead of #ffffff) allows changing the entire color scheme with a single media or class directive. This speeds up maintenance twofold and reduces code volume: no need to override each selector manually. Compare: with the selector-override approach for 50 components, ~500 lines of CSS are needed; with custom properties, only 20 lines. Time savings on maintenance reach 70%. More about media queries can be found in the MDN documentation.
How to avoid FOWT on load?
The script that checks the system theme must run synchronously before the first paint. We place it in <head> right after <meta charset>:
(function(){ var saved = localStorage.getItem('theme'); var dark = saved ? saved==='dark' : window.matchMedia('(prefers-color-scheme: dark)').matches; if(dark) document.documentElement.classList.add('dark'); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e){ if(!localStorage.getItem('theme')) document.documentElement.classList.toggle('dark', e.matches); }); })(); In Bitrix, we include this script inline in header.php:
<script> <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'].'/local/js/theme-init.min.js'); ?> </script> User theme toggle
We give users the ability to manually switch themes, overriding the system setting. Button in the header:
document.getElementById('theme-toggle').addEventListener('click', function(){ var isDark = document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); this.setAttribute('aria-label', isDark ? 'Light theme' : 'Dark theme'); }); The icon changes via CSS custom properties or pseudo-element.
Image adaptation
For the logo, use <picture> with the media attribute:
<picture> <source srcset="/img/logo-dark.svg" media="(prefers-color-scheme: dark)"> <img src="/img/logo-light.svg" alt="Logo"> </picture> For manual switching, JS changes the src of <img>. For product photos on white backgrounds, apply CSS filter:
html.dark .product-image img { filter: brightness(0.9) contrast(1.05); } Which components require mandatory adaptation?
Not all Bitrix components need to be changed, but critical ones — catalog, cart, search, order form — require replacing hardcoded colors with CSS custom properties. We conduct an audit and modify only necessary templates, leaving others unchanged. On average, adaptation affects 10-15 templates.
Comparison of implementation approaches
| Characteristic | CSS custom properties | Traditional override |
|---|---|---|
| Code volume | 20 lines | 500+ lines |
| Maintenance speed | 10x faster | Slow |
| Flexibility | One directive for all components | Per-selector override |
| Performance | Single override | Multiple overrides |
What's included in the work
We provide a complete package:
- Audit of current site styles — identification of all hardcoded colors.
- Design of dark theme color palette.
- Implementation of CSS custom properties in all component templates (catalog, cart, search, order form).
- Integration of in-line script and toggle.
- Image adaptation (logo, icons, banners).
- Testing in Chrome, Firefox, Safari, Edge.
- Documentation for future maintenance.
Work process
Analysis → Design → Implementation → Testing → Deployment. Timelines depend on site size:
| Stage | Timeline |
|---|---|
| Audit of current styles and extraction of color variables | 2 days |
| Development of dark theme palette | 1 day |
| Implementation of CSS custom properties and media query | 2–3 days |
| Initialization script + toggle | 1 day |
| Image and icon adjustments | 1 day |
| Testing in all browsers | 1 day |
| Total | 8–10 days |
Cost is calculated individually — depends on the number of pages and templates. On average, a project takes 8–10 working days. Our engineers hold 1C-Bitrix certifications, ensuring quality implementation. Contact us for an assessment of your project. Get a consultation on dark theme implementation.