A visitor comes to your site at night, and the interface blinds them with a white background. If the dark mode toggle is poorly implemented, the user sees a white flash (FOUC) before the theme changes. They leave in under 3 seconds. We configure dark mode for 1C-Bitrix with smooth transitions, saved preferences, and no broken components. We offer a turnkey solution with a 12-month warranty. Get a free consultation — we'll estimate your project in 2 hours.
How we implement dark mode turnkey
The process takes 2–3 days. First, we audit the current template: colors, fonts, images. Then we convert all colors to CSS custom properties. We already have a proven system of 20+ variables for basic elements (background, text, accents, borders). This is faster than building from scratch. On one project with a catalog of 50,000 items, we saved about 30% development time by reusing variables and avoiding selector overrides.
The key feature: the theme detection script loads inline before styles. Without this, FOUC occurs. We insert it into header.php right after <head>:
<head> <meta charset="UTF-8"> <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> The script instantly sets the data-theme attribute on the root element, and all styles apply without delay. This avoids the characteristic white flash even on slow devices.
Why CSS custom properties instead of classes?
An alternative approach is adding a .dark class on the body and overriding styles via specificity. But that leads to code duplication and complicates maintenance. CSS custom properties work faster (the browser doesn't recalculate selectors) and allow theme changes by simply overriding the values in one place. In our tests, rendering speed improved by 10–15%. The initial cost of implementing with variables is comparable, but long-term maintenance is significantly cheaper.
| Approach | Speed | Browser Support | Migration Complexity |
|---|---|---|---|
| CSS custom properties | High | Modern (96%+) | Low (just change values) |
| Class-based | Medium | All including IE11 | High (override every selector) |
| Separate CSS file | Low | All | High (code duplication) |
We recommend CSS custom properties. For IE11, we provide graceful degradation without dark mode. More about CSS custom properties on MDN.
How to avoid FOUC on page load
FOUC is the main issue with dark mode. If dark mode styles load asynchronously or after rendering, the user sees a white flash. Our solution: the inline script in <head> (see above) sets data-theme before CSS loads. All styles use var(--color-xxx) defined for each attribute.
Adapting images and components
Standard Bitrix blocks (.bx-sls, .popup-window-content, authorization form) have their own styles. We override them using selectors with data-theme:
:root[data-theme="dark"] .bx-sls { background: var(--color-card-bg); color: var(--color-text); } :root[data-theme="dark"] .popup-window-content { background: var(--color-bg); border-color: var(--color-border); } For images, we use <picture> or CSS filters. It's best to prepare a dark version of the logo and insert it via prefers-color-scheme. Logos with transparency require a separate version. For icons, you can apply a CSS filter invert(1) on a light background, but on dark backgrounds the result may be unreadable. We recommend preparing two sets of icons: light and dark. Background gradients should be overridden via CSS custom properties.
Common mistakes during implementation
First mistake: forgetting about components that render asynchronously (e.g., cart in a popup). Second: not handling images with inline styles. Third: not saving the theme choice in the Bitrix authorized user profile, causing the setting to reset after logout. We cover all these cases during testing.
What is included in the work
- Audit of current styles and components
- Migration of colors to CSS custom properties (main file + components)
- Inline theme detection script (no FOUC)
- Theme toggle button (desktop + mobile)
- Saving choice in localStorage and authorized profile (Bitrix)
- Image adaptation (logos, icons, backgrounds)
- Override of standard components: smart search, popups, authorization
- Testing in Chrome, Firefox, Safari, Edge
- Documentation of variables and API
- Content manager training
Stages and timelines
| Stage | Time |
|---|---|
| Audit and design | 1–2 h |
| Migration to variables | 6–12 h |
| Script and toggle logic | 2–3 h |
| Image adaptation | 2–4 h |
| Component overrides | 3–6 h |
| Testing and fixes | 2–3 h |
Total 2 to 3 days depending on template complexity. Contact us for a preliminary estimate — it takes less than an hour. Experience with Bitrix: 8+ years, over 50 projects completed. We provide a 12-month warranty on all work. Order dark mode implementation today.