/* ==================================================================== * Arilis — тёмная версия витрины. * Developer: Site Done · https://sitedone.tech * * Подключается только тем, кто её включил: /?ar_dark=1 — включить, * /?ar_dark=0 — выключить. Решение принимает сервер и ставит data-theme на * до первой отрисовки, поэтому светлая страница не успевает мигнуть. * * ВЕНДОРНЫЙ styles.css НЕ ПРАВИТСЯ. Это нетронутая копия шаблона, одна и та * же в макете и в магазине, и её однажды заменят при обновлении темы. Всё * тёмное живёт здесь: удалить файл — и от тёмной версии не останется следа. * * ── Почему это вообще выполнимо ───────────────────────────────────── * * Тема написана на переменных: 1186 обращений через var() против 142 сырых * цветов на 24 тысячи строк. Значит палитра переопределяется в одном месте, * а руками правится только то, что мимо переменных. * * ── И где ловушка ─────────────────────────────────────────────────── * * Две переменные названы по цвету, а не по роли, и работают сразу в двух: * * --white фон 96, текст 81, рамка 8 * --text-primary фон 63, текст 143, рамка 55 * * «Белый» — это и фон страницы, и белые буквы на тёмной кнопке. Перекрасить * его в тёмный значит получить тёмные буквы на тёмной кнопке. То же с * --text-primary наоборот: это и цвет текста, и заливка кнопки. * * Поэтому переменные переворачиваются по основной роли — фон для «белого», * текст для «первичного», — а меньшая роль чинится точечно, разделом * «Починка» ниже. Список починок ведётся глазами по странице, а не по grep: * grep находит объявления, а видно — сочетания. * * Остальные переменные однозначны и переворачиваются как есть: * --surface (70 фон / 3 текст), --line (182 рамка), --text-secondary, * --text-mute, --bg-2. * ==================================================================== */ :root[data-theme="dark"] { /* Основа. Тёмно-синий, а не серый: фирменный цвет — синий, и нейтраль с его подмесом читается как выбранная, а чистый графит — как случайная. */ --ar-dk-page: #101a2b; /* полотно страницы и карточек */ --ar-dk-raised: #182237; /* полосы и панели, что лежат поверх полотна */ --ar-dk-sunken: #0b1322; /* поля ввода и всё, что «внутрь» */ --ar-dk-line: #26324c; --ar-dk-ink: #e9edf5; --ar-dk-ink-2: #a3aec2; --ar-dk-mute: #6f7d95; /* Заливка фирменных кнопок. Не #132959: на полотне #101a2b тёмно-синяя кнопка почти сливается с фоном. Поднята по светлоте настолько, чтобы оставаться тем же синим и читаться как кнопка. */ --ar-dk-brand: #3a6ac0; /* И фирменная полоса — та, что в светлой версии идёт над шапкой и под подвалом. Она тоже синяя, но это плоскость во всю ширину, а не кнопка: на цвете кнопки полоса кричала бы. Темнее её и темнее полотна. */ --ar-dk-band: #16244a; /* Янтарный не трогаем — он и задуман как единственное цветное пятно, и на тёмном работает лучше, чем на белом. */ /* ── переворот темы ──────────────────────────────────────────────── */ --white: var(--ar-dk-page); --surface: var(--ar-dk-raised); --bg-2: var(--ar-dk-raised); --line: var(--ar-dk-line); --text-primary: var(--ar-dk-ink); --text-secondary: var(--ar-dk-ink-2); --text-mute: var(--ar-dk-mute); --main: var(--ar-dk-ink); /* Полупрозрачные накладки темы построены на чёрном: на светлом это тень, на тёмном — ничто. Самые ходовые переопределены белыми той же силы, и из тени становятся мягкой подсветкой края. */ --white_10: rgba(255, 255, 255, 0.10); --white_15: rgba(255, 255, 255, 0.15); color-scheme: dark; } /* Полотно страницы. Тема красит body переменной --white, и та уже перевёрнута — но за body стоит ещё и белый по умолчанию у html, который проглядывает при перетягивании (rubber band) на телефоне. */ :root[data-theme="dark"], :root[data-theme="dark"] body { background: var(--ar-dk-page); } /* === НАЧАЛО СГЕНЕРИРОВАННОГО. Правится через tools/v4/dark-repairs.js === */ /* * Собрано из styles.css, v4.css и eu-v4.css. Руками не править — правка * потеряется при следующем прогоне. Что и почему — в шапке скрипта. */ /* Белые буквы остаются белыми — 82 правил, из них 1 с важностью. Переменная «белый» перевёрнута в полотно страницы, и там, где она стояла цветом текста, буквы стали тёмными на тёмном. Здесь она буквальная. */ :root[data-theme="dark"] .account-avatar .upload-btn, :root[data-theme="dark"] .ar-ac-avatar, :root[data-theme="dark"] .ar-bench_head, :root[data-theme="dark"] .ar-bench_slot.is-active, :root[data-theme="dark"] .ar-co-block.is-done .ar-co-step, :root[data-theme="dark"] .ar-mswitch-money, :root[data-theme="dark"] .ar-signed-in, :root[data-theme="dark"] .ar-th-mark, :root[data-theme="dark"] .ar-th-steps li.is-done::before, :root[data-theme="dark"] .ar-theme, :root[data-theme="dark"] .ar-theme:hover, :root[data-theme="dark"] .ar-theme:focus-visible, :root[data-theme="dark"] .badge-sale, :root[data-theme="dark"] .box-ft-infor .icon, :root[data-theme="dark"] .box-icon_V01 .ic-wrap, :root[data-theme="dark"] .box-navigation.style-white .item-link, :root[data-theme="dark"] .box-navigation.style-white .item-link .icon, :root[data-theme="dark"] .btn-close-popup:hover, :root[data-theme="dark"] .btn-nav-drop, :root[data-theme="dark"] .btn-nav-drop.ar-light:hover, :root[data-theme="dark"] .btn-nav-drop.ar-light.active, :root[data-theme="dark"] .btn-sidebar-mb button, :root[data-theme="dark"] .category-v02 .cate-sale span, :root[data-theme="dark"] .eu-cmp-buy:hover, :root[data-theme="dark"] .eu-cmp-expand:hover, :root[data-theme="dark"] .eu-date-day.is-on, :root[data-theme="dark"] .eu-date-day.is-on:hover, :root[data-theme="dark"] .eu-date-day.is-today, :root[data-theme="dark"] .eu-date-day.is-today:hover, :root[data-theme="dark"] .filter-size-box .size-item.active, :root[data-theme="dark"] .filter-size-box .size-item:hover, :root[data-theme="dark"] .footer-contact .ic-wrap, :root[data-theme="dark"] .form-search-nav .btn-action_submit:hover, :root[data-theme="dark"] .form-search-nav .btn-action_submit:hover, :root[data-theme="dark"] .form-search-nav .btn-action_submit:focus-visible, :root[data-theme="dark"] .form-search-nav.style-2 .btn-action_submit, :root[data-theme="dark"] .form-v1 .btn-action_submit, :root[data-theme="dark"] .hover-tooltip .tooltip, :root[data-theme="dark"] .meta-filter-shop .remove-all-filters:hover, :root[data-theme="dark"] .nav-category_link .nav-badge.new, :root[data-theme="dark"] .nav-icon-list .nav-icon-item.has-number .number-order, :root[data-theme="dark"] .product-action_bot .btn-action_choose:hover, :root[data-theme="dark"] .product-action_list .box-icon:hover, :root[data-theme="dark"] .product-action_remove.box-icon:hover, :root[data-theme="dark"] .product-badge_item, :root[data-theme="dark"] .pswp__icn, :root[data-theme="dark"] .sb-tag a:hover, :root[data-theme="dark"] .single-content_body .bottom-other .entry-tag:hover, :root[data-theme="dark"] .single-content_heading .entry-tag, :root[data-theme="dark"] .social-color .social-facebook:hover, :root[data-theme="dark"] .social-color .social-instagram:hover, :root[data-theme="dark"] .social-color .social-linkin:hover, :root[data-theme="dark"] .social-color .social-pinterest:hover, :root[data-theme="dark"] .social-color .social-snapchat:hover, :root[data-theme="dark"] .social-color .social-tiktok:hover, :root[data-theme="dark"] .social-color .social-x:hover, :root[data-theme="dark"] .social-list a, :root[data-theme="dark"] .social-list.style-2 a:hover, :root[data-theme="dark"] .tf-btn, :root[data-theme="dark"] .tf-btn-line.style-white, :root[data-theme="dark"] .tf-btn-square:hover, :root[data-theme="dark"] .tf-btn.btn-white_10, :root[data-theme="dark"] .tf-cart_item .cart_remove .icon:hover, :root[data-theme="dark"] .tf-check::before, :root[data-theme="dark"] .tf-compare-list .tf-compare-item .icon:hover, :root[data-theme="dark"] .tf-control-layout .tf-view-layout-switch:hover, :root[data-theme="dark"] .tf-control-layout .tf-view-layout-switch.active, :root[data-theme="dark"] .tf-dropdown-select.color-white > .dropdown-toggle, :root[data-theme="dark"] .tf-dropdown-select.color-white > .dropdown-toggle::after, :root[data-theme="dark"] .tf-pagination .pag-item.active, :root[data-theme="dark"] .tf-pagination-shop .pagination-item.active, :root[data-theme="dark"] .tf-pin-btn-2 .icon, :root[data-theme="dark"] .tf-pin-btn:hover span, :root[data-theme="dark"] .tf-product-support-box .btn-action_chat:hover, :root[data-theme="dark"] .tf-product-support-box .ic-wrap, :root[data-theme="dark"] .tf-social-icon a:hover, :root[data-theme="dark"] .tf-social-icon-2 a:hover, :root[data-theme="dark"] .tf-sw-nav, :root[data-theme="dark"] .tf-sw-nav.style-2:hover, :root[data-theme="dark"] .tf-sw-nav.style-3:hover, :root[data-theme="dark"] .tf-sw-nav:hover, :root[data-theme="dark"] .tf-table-compare .remove:hover, :root[data-theme="dark"] .tf-toolbar-bottom .eu-signed-in, :root[data-theme="dark"] .tf-toolbar-bottom .toolbar-count, :root[data-theme="dark"] form .field-ipt-envelope input, :root[data-theme="dark"] form .field-ipt-envelope input::placeholder, :root[data-theme="dark"] form select.style-2, :root[data-theme="dark"] form textarea.style-2, :root[data-theme="dark"] form input[type=text].style-2, :root[data-theme="dark"] form input[type=password].style-2, :root[data-theme="dark"] form input[type=datetime].style-2, :root[data-theme="dark"] form input[type=datetime-local].style-2, :root[data-theme="dark"] form input[type=date].style-2, :root[data-theme="dark"] form input[type=month].style-2, :root[data-theme="dark"] form input[type=time].style-2, :root[data-theme="dark"] form input[type=week].style-2, :root[data-theme="dark"] form input[type=number].style-2, :root[data-theme="dark"] form input[type=email].style-2, :root[data-theme="dark"] form input[type=url].style-2, :root[data-theme="dark"] form input[type=search].style-2, :root[data-theme="dark"] form input[type=tel].style-2, :root[data-theme="dark"] form input[type=color].style-2, :root[data-theme="dark"] form select.style-2::placeholder, :root[data-theme="dark"] form textarea.style-2::placeholder, :root[data-theme="dark"] form input[type=text].style-2::placeholder, :root[data-theme="dark"] form input[type=password].style-2::placeholder, :root[data-theme="dark"] form input[type=datetime].style-2::placeholder, :root[data-theme="dark"] form input[type=datetime-local].style-2::placeholder, :root[data-theme="dark"] form input[type=date].style-2::placeholder, :root[data-theme="dark"] form input[type=month].style-2::placeholder, :root[data-theme="dark"] form input[type=time].style-2::placeholder, :root[data-theme="dark"] form input[type=week].style-2::placeholder, :root[data-theme="dark"] form input[type=number].style-2::placeholder, :root[data-theme="dark"] form input[type=email].style-2::placeholder, :root[data-theme="dark"] form input[type=url].style-2::placeholder, :root[data-theme="dark"] form input[type=search].style-2::placeholder, :root[data-theme="dark"] form input[type=tel].style-2::placeholder, :root[data-theme="dark"] form input[type=color].style-2::placeholder { color: #ffffff; } :root[data-theme="dark"] .link-white:hover { color: #ffffff !important; } /* Фирменная заливка остаётся тёмной — 46 правил, из них 1 с важностью. Переменная «первичный» перевёрнута в чернила, и там, где она была заливкой, синяя полоса стала светлой. */ :root[data-theme="dark"] .ar-ac-avatar, :root[data-theme="dark"] .ar-bench_head, :root[data-theme="dark"] .ar-bench_photo.is-dark::after, :root[data-theme="dark"] .ar-bench_slot.is-active, :root[data-theme="dark"] .ar-co-block.is-done .ar-co-step, :root[data-theme="dark"] .ar-co-place, :root[data-theme="dark"] .ar-facet.is-on .ar-facet-box, :root[data-theme="dark"] .ar-mswitch-money, :root[data-theme="dark"] .banner-sale, :root[data-theme="dark"] .banner-v02 .col-left, :root[data-theme="dark"] .banner-v03 .bn-content, :root[data-theme="dark"] .banner-v04 .bn-content, :root[data-theme="dark"] .box-ft-infor, :root[data-theme="dark"] .box-icon_V01 .ic-wrap, :root[data-theme="dark"] .canvas-mb .canvas-body::-webkit-scrollbar-thumb, :root[data-theme="dark"] .eu-cmp-buy:hover, :root[data-theme="dark"] .eu-cmp-expand:hover, :root[data-theme="dark"] .eu-cmp-switch input:checked + .eu-cmp-switch-track, :root[data-theme="dark"] .eu-date-day.is-on, :root[data-theme="dark"] .eu-date-day.is-on:hover, :root[data-theme="dark"] .footer-heading-mobile::after, :root[data-theme="dark"] .footer-heading-mobile::before, :root[data-theme="dark"] .form-get-v2 .form-title, :root[data-theme="dark"] .ic-accordion-custom::after, :root[data-theme="dark"] .ic-accordion-custom::before, :root[data-theme="dark"] .mb-menu-link .ic-custom::after, :root[data-theme="dark"] .mb-menu-link .ic-custom::before, :root[data-theme="dark"] .noUi-connect, :root[data-theme="dark"] .notification-progress .value, :root[data-theme="dark"] .product-color_list .product-color-item.active, :root[data-theme="dark"] .sb-tag a:hover, :root[data-theme="dark"] .section-support .media-contact, :root[data-theme="dark"] .single-content_body .bottom-other .entry-tag:hover, :root[data-theme="dark"] .single-content_heading .entry-tag, :root[data-theme="dark"] .social-list.style-2 a:hover, :root[data-theme="dark"] .sw-dot-default .swiper-pagination-bullet::before, :root[data-theme="dark"] .sw-line-default .swiper-pagination-bullet, :root[data-theme="dark"] .testimonial-v02 .tes-author, :root[data-theme="dark"] .tf-check-rounded::before, :root[data-theme="dark"] .tf-check:checked, :root[data-theme="dark"] .tf-compare-list .tf-compare-item .icon:hover, :root[data-theme="dark"] .tf-control-layout .tf-view-layout-switch:hover, :root[data-theme="dark"] .tf-control-layout .tf-view-layout-switch.active, :root[data-theme="dark"] .tf-pagination .pag-item.active, :root[data-theme="dark"] .tf-product-support-box .ic-wrap, :root[data-theme="dark"] .tf-sw-nav.style-3:hover, :root[data-theme="dark"] .tf-sw-nav:hover, :root[data-theme="dark"] .tf-table-compare .remove:hover, :root[data-theme="dark"] .tf-variant-dropdown .select-item.active::before { background-color: var(--ar-dk-band); } :root[data-theme="dark"] .bg-primary-2 { background-color: var(--ar-dk-band) !important; } /* Кнопки — фирменным, но светлее полосы — 17 правил. Тот же перевёрнутый «первичный», но на кнопке. Ей нужно быть заметной на тёмном полотне, а не сливаться с ним, — потому цвет отдельный. */ :root[data-theme="dark"] .btn-action-price, :root[data-theme="dark"] .box-action_add .tf-btn, :root[data-theme="dark"] .ar-quick_form .tf-btn, :root[data-theme="dark"] .btn-close-popup:hover, :root[data-theme="dark"] .btn-nav-drop.ar-light:hover, :root[data-theme="dark"] .btn-nav-drop.ar-light.active, :root[data-theme="dark"] .btn-nav-drop.style-2:not(:hover, :root[data-theme="dark"] .active), :root[data-theme="dark"] .card-product_button .group-btn .tf-btn, :root[data-theme="dark"] .form-search-nav .btn-action_submit:hover, :root[data-theme="dark"] .form-search-nav .btn-action_submit:focus-visible, :root[data-theme="dark"] .form-search-nav.style-2 .btn-action_submit:not(:hover), :root[data-theme="dark"] .form-v1 .btn-action_submit, :root[data-theme="dark"] .list-tab-btn-v1.style-2 .tf-btn-tab::before, :root[data-theme="dark"] .slideshow-v01 .sld-content .tf-btn, :root[data-theme="dark"] .ar-quick-pick .tf-btn:not(.btn-outline), :root[data-theme="dark"] .tf-btn-icon::before, :root[data-theme="dark"] .tf-btn-line::after, :root[data-theme="dark"] .tf-btn-line::before, :root[data-theme="dark"] .tf-btn.btn-white-2, :root[data-theme="dark"] .tf-btn:hover, :root[data-theme="dark"] .tf-product-info-wrap .variant-size .size-btn.style-radio .check-rounded::before, :root[data-theme="dark"] .tf-product-support-box .btn-action_chat:hover { background-color: var(--ar-dk-brand); border-color: var(--ar-dk-brand); } /* Фирменная обводка остаётся тёмной — 34 правил. То же с рамками — и отдельным правилом: выдать фон элементу, у которого была одна обводка, значит нарисовать плашку там, где её не было. */ :root[data-theme="dark"] .ar-404-search input:focus, :root[data-theme="dark"] .ar-ac-bar button:hover, :root[data-theme="dark"] .ar-ac-radio:hover, :root[data-theme="dark"] .ar-ac-radio:has(input:checked), :root[data-theme="dark"] .ar-bench_slot.is-active, :root[data-theme="dark"] .ar-bench_slot.is-set, :root[data-theme="dark"] .ar-cat-tile:hover, :root[data-theme="dark"] .ar-chip:hover, :root[data-theme="dark"] .ar-chip.is-all, :root[data-theme="dark"] .ar-co .eu-field input:focus, :root[data-theme="dark"] .ar-co .eu-field textarea:focus, :root[data-theme="dark"] .ar-co-login input:focus, :root[data-theme="dark"] .ar-co-coupon input:focus, :root[data-theme="dark"] .ar-co-method.is-on, :root[data-theme="dark"] .ar-co-place, :root[data-theme="dark"] .ar-facet.is-on .ar-facet-box, :root[data-theme="dark"] .ar-filter-foot .ar-filter-clear:hover, :root[data-theme="dark"] .ar-find-field:focus-within, :root[data-theme="dark"] .ar-msearch_form:focus-within, :root[data-theme="dark"] .ar-quick_dial_find:focus, :root[data-theme="dark"] .ar-quick_field:focus-within, :root[data-theme="dark"] .card-product:hover::after, :root[data-theme="dark"] .eu-cmp-expand:hover, :root[data-theme="dark"] .eu-select-find_input:focus, :root[data-theme="dark"] .field-color:has(input:checked), :root[data-theme="dark"] .field-select .nice-select:hover, :root[data-theme="dark"] .field-select .nice-select.open, :root[data-theme="dark"] .list-name-privacy a.active, :root[data-theme="dark"] .my-account-content .tf-field input:not([type=radio]):not([type=checkbox]):focus, :root[data-theme="dark"] .my-account-content .tf-field textarea:focus, :root[data-theme="dark"] .ar-page .tf-field input:not([type=radio]):not([type=checkbox]):focus, :root[data-theme="dark"] .ar-page .tf-field textarea:focus, :root[data-theme="dark"] .product-thumbs-slider .tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active .item::after, :root[data-theme="dark"] .social-list.style-2 a:hover, :root[data-theme="dark"] .tf-check-rounded:checked, :root[data-theme="dark"] .tf-check:checked, :root[data-theme="dark"] .tf-compare-list .tf-compare-item .icon:hover, :root[data-theme="dark"] .tf-pagination .pag-item.active, :root[data-theme="dark"] .tf-select select:focus, :root[data-theme="dark"] .tf-table-compare .remove:hover, :root[data-theme="dark"] .tf-variant-dropdown:hover, :root[data-theme="dark"] form select:focus, :root[data-theme="dark"] form textarea:focus, :root[data-theme="dark"] form input[type=text]:focus, :root[data-theme="dark"] form input[type=password]:focus, :root[data-theme="dark"] form input[type=datetime]:focus, :root[data-theme="dark"] form input[type=datetime-local]:focus, :root[data-theme="dark"] form input[type=date]:focus, :root[data-theme="dark"] form input[type=month]:focus, :root[data-theme="dark"] form input[type=time]:focus, :root[data-theme="dark"] form input[type=week]:focus, :root[data-theme="dark"] form input[type=number]:focus, :root[data-theme="dark"] form input[type=email]:focus, :root[data-theme="dark"] form input[type=url]:focus, :root[data-theme="dark"] form input[type=search]:focus, :root[data-theme="dark"] form input[type=tel]:focus, :root[data-theme="dark"] form input[type=color]:focus { border-color: var(--ar-dk-band); } /* Обводка кнопки — тем же, чем её заливка — 13 правил. Кнопка с одной обводкой и без заливки: фон ей давать нельзя, а видимой быть надо — потому цвет кнопочный, а объявление одно. */ :root[data-theme="dark"] .ar-quick-pick .btn-outline:hover, :root[data-theme="dark"] .btn-action-price, :root[data-theme="dark"] .box-action_add .tf-btn, :root[data-theme="dark"] .ar-quick_form .tf-btn, :root[data-theme="dark"] .btn-nav-drop.ar-light:hover, :root[data-theme="dark"] .btn-nav-drop.ar-light.active, :root[data-theme="dark"] .canvas-quickview .quickview-product-variant .variant-color .color-btn_quick.active, :root[data-theme="dark"] .canvas-quickview .quickview-product-variant .variant-size .size-btn_quick:hover, :root[data-theme="dark"] .canvas-quickview .quickview-product-variant .variant-size .size-btn_quick.active, :root[data-theme="dark"] .card-product_button .group-btn .tf-btn, :root[data-theme="dark"] .eu-date-btn:hover, :root[data-theme="dark"] .eu-date.is-open .eu-date-btn, :root[data-theme="dark"] .eu-select.is-open .eu-select-btn, :root[data-theme="dark"] .slideshow-v01 .sld-content .tf-btn, :root[data-theme="dark"] .ar-quick-pick .tf-btn:not(.btn-outline), :root[data-theme="dark"] .tf-btn.style-stroke:hover, :root[data-theme="dark"] .tf-product-info-wrap .variant-color .color-btn:not(.select-item).active, :root[data-theme="dark"] .tf-product-info-wrap .variant-size .size-btn.style-radio.active .check-rounded, :root[data-theme="dark"] .tf-product-info-wrap .variant-size .size-btn:not(.select-item):hover, :root[data-theme="dark"] .tf-product-info-wrap .variant-size .size-btn:not(.select-item).active { border-color: var(--ar-dk-brand); } /* === КОНЕЦ СГЕНЕРИРОВАННОГО === */ /* ==================================================================== * Починка руками — после сгенерированной и потому поверх неё * * Разбор таблицы стилей знает, где переменная стоит не в своей роли, но не * знает, полоса это или кнопка: разница не в файле, а в том, на что жмут. * Поэтому общее чинится машиной выше, частное — здесь, и порядок между ними * не косметика, а условие работы: вес у правил одинаковый, решает нижнее. * ==================================================================== */ /* Фирменная кнопка. Была: заливка --text-primary, буквы --white. Обе перевернулись, и кнопка стала светлой с тёмными буквами — то есть поменялась ролями с фоном страницы. Возвращаем: синяя заливка, белые буквы, и белые именно белые, а не «переменная белый». */ :root[data-theme="dark"] .tf-btn, :root[data-theme="dark"] .tf-btn:hover, :root[data-theme="dark"] .btn-fill, :root[data-theme="dark"] .tf-btn-default { background-color: var(--ar-dk-brand); border-color: var(--ar-dk-brand); color: #ffffff; } /* Поля ввода — «внутрь», а не «поверх». */ :root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--ar-dk-sunken); border-color: var(--ar-dk-line); color: var(--ar-dk-ink); } :root[data-theme="dark"] ::placeholder { color: var(--ar-dk-mute); } /* ==================================================================== * Фотографии товара * * Снимки EcoFlow и DJI сняты на белом фоне, и на тёмной странице каждая * карточка превращается в светящийся прямоугольник — семь сотен ламп на * листинге. Перекрасить их нельзя: это не наши файлы и фон у них внутри * пикселей, а не в разметке. * * Поэтому фотография остаётся на светлой подложке, и подложка получает * форму: плашка со скруглением карточки. Снимок читается как предмет на * столе, а не как дыра в странице. * * Подложка именно белая, и это измерено, а не подобрано на глаз. Первая * версия была #eef1f6 — чуть сероватая, — и на карточках DJI вокруг снимка * появилось серое кольцо: фотография не заполняет плашку целиком, и разница * в тон вылезла рамкой (клиент, 2026-08-31). Проба углового пикселя через * canvas: jpeg-и лежат на чистом rgb(255,255,255), png-и прозрачны. Белый * здесь не компромисс, а тот же цвет, что внутри самих файлов, — и шва не * остаётся ни у тех, ни у других. * ==================================================================== */ :root[data-theme="dark"] .card-product .product-img, :root[data-theme="dark"] .card-product_wrapper { background: #ffffff; border-radius: var(--ar-radius, 8px); overflow: hidden; } /* Надкатегория над названием больше не прилипает к фотографии. В светлой версии снимок висит на белом, нижнего края у него нет, и строке не к чему прижиматься. В тёмной у плашки край появился, и двенадцатый кегль лёг прямо на него (клиент, 2026-08-31). */ :root[data-theme="dark"] .card-product .product-cate { margin-top: 6px; } /* ==================================================================== * Квадратики фильтра * * Рисуются не браузером, а нами: `.ar-facet-box` с рамкой чёрного в 20%. На * белом это спокойный серый контур, на тёмном — ничто, и колонка фильтров * превращалась в список без единого признака, что по нему можно щёлкать * (клиент, 2026-08-31). * * Белый в 28%, а не сплошной: рамка обозначает поле для выбора, а не спорит * с названием рядом. Отмеченный получает синий кнопки — тот самый цвет, * которым на этой странице обозначено «нажато», и белая галочка внутри * остаётся видимой. * ==================================================================== */ :root[data-theme="dark"] .ar-facet-box { border-color: rgba(255, 255, 255, .28); } :root[data-theme="dark"] .ar-facet:hover .ar-facet-box { border-color: rgba(255, 255, 255, .45); } :root[data-theme="dark"] .ar-facet.is-on .ar-facet-box { background: var(--ar-dk-brand); border-color: var(--ar-dk-brand); } /* ==================================================================== * Кружки на фотографии — белые, как в светлой версии * * Избранное, сравнение и быстрый просмотр лежат прямо на снимке, а снимок * на тёмной странице остался светлым. Перевёрнутый «белый» сделал их * тёмно-синими квадратами поверх белого фона — три чернильных пятна на * фотографии товара (клиент, 2026-08-31). * * Возвращены к тому, чем они и были: белая плашка, фирменный знак внутри, * тонкая рамка. Цвета здесь буквальные, а не переменными: элемент лежит на * чужой светлой поверхности и должен подчиняться ей, а не теме страницы. * Наведение остаётся тёмным — оно и в светлой версии тёмное. * ==================================================================== */ :root[data-theme="dark"] .product-action_list .box-icon { background-color: #ffffff; border-color: rgba(19, 41, 89, .14); color: #132959; } :root[data-theme="dark"] .product-action_list .box-icon .icon { color: inherit; } /* ==================================================================== * Галерея на карточке товара — на белом, как и снимки в списке * * Часть фотографий EcoFlow — png с прозрачным фоном. В светлой версии они * ложились на белую страницу и выглядели вырезанными по контуру; на тёмной * прозрачность пропускает полотно, и тёмно-серая станция оказывается на * тёмно-синем — предмет виден силуэтом, а не изделием (клиент, 2026-08-31). * * Плашка ставится под сам снимок, а не под слайд: слайд у Swiper ездит и * получает от него свои размеры, а `.item` — то, что снимок и занимает. * Лента миниатюр — тем же, иначе четыре тёмных квадрата под белой картинкой. * * То же самое верно и в светлой версии внутри лупы: подложка там тёмная у * обеих тем, и прозрачный png в ней так же теряется. Здесь это правится * только для тёмной — светлую без просьбы не трогаю. * ==================================================================== */ :root[data-theme="dark"] .tf-product-media-main .swiper-slide .item, :root[data-theme="dark"] .tf-product-media-thumbs .swiper-slide .item { background: #ffffff; border-radius: var(--ar-radius, 8px); overflow: hidden; } /* И в лупе: она открывается поверх тёмной подложки, и прозрачный снимок в ней остаётся тёмным на тёмном. За непрозрачной фотографией эта заливка не видна вовсе — картинка закрывает её целиком. */ :root[data-theme="dark"] .pswp__img { background: #ffffff; } /* ==================================================================== * Свечение фирменных кнопок (клиент, 2026-08-31) * * Кнопке на тёмном мало быть светлее фона: у светлой страницы работает * тень, а на тёмной тень не видна, и кнопка лежит плоско. Мягкое свечение * её же цветом возвращает объём, не трогая ни заливки, ни надписи. * * Только сплошным фирменным кнопкам. `.tf-btn-line` — обводка без заливки, * `.btn-white_10` — полупрозрачная накладка на снимке; свечение вокруг них * было бы ореолом вокруг пустоты. * * Цвет свечения — отдельной переменной: он должен идти следом за цветом * кнопки, а не жить своей жизнью, если тот однажды поменяют. * ==================================================================== */ :root[data-theme="dark"] { --ar-dk-glow: rgba(58, 106, 192, .55); } :root[data-theme="dark"] .tf-btn:not(.tf-btn-line):not(.btn-white_10) { box-shadow: 0 4px 16px -4px var(--ar-dk-glow); transition: box-shadow .25s ease, background-color .25s ease; } :root[data-theme="dark"] .tf-btn:not(.tf-btn-line):not(.btn-white_10):hover, :root[data-theme="dark"] .tf-btn:not(.tf-btn-line):not(.btn-white_10):focus-visible { box-shadow: 0 6px 22px -4px rgba(58, 106, 192, .85); } /* ==================================================================== * Точки перелистывания * * Тема красит точку переменной «первичный», и починка увела её в цвет * полосы — то есть почти в цвет полотна. Неактивные точки пропали, осталось * кольцо активной (клиент, 2026-08-31). * * Неактивная — белый в 38%: её задача сказать «есть ещё», а не спорить с * активной. Активная — полными чернилами, и кольцо вокруг неё тема рисует * сама. * ==================================================================== */ :root[data-theme="dark"] .sw-dot-default .swiper-pagination-bullet::before { background: rgba(255, 255, 255, .38); } :root[data-theme="dark"] .sw-dot-default .swiper-pagination-bullet-active::before { background: var(--ar-dk-ink); } /* Полоски того же назначения — той же логикой. */ :root[data-theme="dark"] .sw-line-default .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { background: rgba(255, 255, 255, .22); } /* ==================================================================== * Поля, у которых рамку рисует обёртка * * Общее правило выше красит поля ввода «вглубь» — тёмным на тон ниже * полотна. Для обычной формы это верно: поле читается как углубление. * * Но часть полей на витрине устроена иначе: рамку, скругление и отступы * рисует обёртка вокруг, а само поле безфоновое и просто лежит в ней. Такому * заливка даёт коробку в коробке — тёмный прямоугольник внутри рамки. Клиент * поймал это трижды: поиск в шапке, поиск на телефоне, счётчик количества * между минусом и плюсом (2026-08-31). * * Поэтому список, а не догадка по признакам: обёртка узнаётся глазами, а не * селектором, и перечислить четыре места честнее, чем написать правило, * которое однажды выключит фон у настоящего поля формы. * * Тот же набор :not(), что и в общем правиле, — иначе оно тяжелее по весу и * побеждает. Первая попытка была без них и молча не сработала. * ==================================================================== */ :root[data-theme="dark"] .form-search-nav input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), :root[data-theme="dark"] .ar-msearch input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), :root[data-theme="dark"] .wg-quantity input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), :root[data-theme="dark"] .ar-quick_field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { background-color: transparent; } /* ==================================================================== * Всплывающие карточки * * Тост — единственный кусок витрины, который остался белым: фон у него * прописан цветом, а не переменной, потому что в светлой версии он должен * быть белым независимо от того, на какую фотографию он лёг. На тёмной * странице получилась белая карточка со светлым текстом на ней — то есть * нечитаемая (клиент, 2026-08-31). * * Переведён на тёмную поверхность целиком, с сохранением замысла: цветовая * подсветка угла осталась (зелёная для «добавлено», серая для «убрано», * красная для ошибки), а тени из синеватых стали чёрными — синяя тень на * тёмно-синем не тень, а пятно. * * Подложка под фотографией товара остаётся светлой: снимок тот же, что в * карточках, и правило для него то же. * ==================================================================== */ :root[data-theme="dark"] .ar-toast { border-color: var(--ar-dk-line); background: radial-gradient(140px 96px at 0% 0%, var(--ar-accent-wash), transparent 72%), var(--ar-dk-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .5), 0 28px 54px -18px rgba(0, 0, 0, .6); } :root[data-theme="dark"] .ar-toast__title { color: var(--ar-dk-ink); } :root[data-theme="dark"] .ar-toast__text { color: var(--ar-dk-ink-2); } /* Кольцо вокруг галочки отделяет её от фотографии — значит оно цвета карточки, а не белое, иначе на тёмном тосте это светлый ободок. */ :root[data-theme="dark"] .ar-toast__badge { box-shadow: 0 0 0 2.5px var(--ar-dk-raised), 0 2px 6px rgba(0, 0, 0, .45); } /* Кольцо активной точки в белом варианте слайдера. Тема рисует его переменной «белый», а та перевёрнута в полотно — кольцо совпало с фоном и пропало ровно там, где слайдер объявлен светлым. */ :root[data-theme="dark"] .sw-dot-default.style-white .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--ar-dk-ink); } /* Поле поиска: та же прозрачность, но с тем же набором исключений, что и у общего правила для полей. Без него правило легче по весу и проигрывает — три `:not()` в общем стоят дороже, чем один класс здесь. */ :root[data-theme="dark"] .form-search-nav input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { background-color: transparent; } /* ==================================================================== * Выпадающие списки Bootstrap — язык, валюта и все остальные * * Список языков открывался белой карточкой с тёмными буквами посреди * тёмной страницы; то же с валютой, и одинаково на телефоне и на широком * экране (клиент, 2026-08-31). * * Причина не в теме: список рисует bootstrap-select, а цвета ему даёт сам * Bootstrap своими переменными — `--bs-dropdown-bg` это белый, а * `--bs-dropdown-link-color` — его собственный тёмно-серый. Ни та, ни другая * не проходят через палитру темы, поэтому переворот их не задел: внешняя * коробка потемнела вместе с `--white`, а список внутри неё остался белым. * * Правятся сами переменные, а не конкретный список. Их читает каждый * дропдаун на витрине, и починка одного селектора оставила бы остальные * белеть до следующего письма от клиента. * * Отмеченный пункт не заливается фирменным: тема и так красит его малиновым * — тем же, что у выбранного таба, — и заливка под цветным текстом была бы * вторым способом сказать то же самое. * ==================================================================== */ /* Объявляются на самом списке, а не на корне: Bootstrap задаёт весь набор прямо в правиле .dropdown-menu, а значение, объявленное на элементе, сильнее унаследованного сверху. Первая попытка стояла на :root и молча не доходила — список оставался белым. */ :root[data-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--ar-dk-raised); --bs-dropdown-color: var(--ar-dk-ink); --bs-dropdown-border-color: var(--ar-dk-line); --bs-dropdown-divider-bg: var(--ar-dk-line); --bs-dropdown-link-color: var(--ar-dk-ink); --bs-dropdown-link-hover-color: var(--ar-dk-ink); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .07); --bs-dropdown-link-active-color: var(--ar-dk-ink); --bs-dropdown-link-active-bg: rgba(255, 255, 255, .10); --bs-dropdown-link-disabled-color: var(--ar-dk-mute); } /* Стрелка-хвостик под списком: тема рисует её отдельным треугольником в цвете белого, и на тёмном она осталась светлым язычком под тёмной карточкой. */ :root[data-theme="dark"] .tf-dropdown-select .dropdown-menu::before, :root[data-theme="dark"] .tf-dropdown-select .dropdown-menu::after { border-bottom-color: var(--ar-dk-raised); border-top-color: var(--ar-dk-raised); } /* Внешняя коробка списка — того же тона, что и сам список. Её красит тема переменной «белый», и после переворота она стала цветом полотна: список лежал на ней чуть более светлым прямоугольником, и по краю читалась лишняя ступенька. */ :root[data-theme="dark"] .tf-dropdown-select .dropdown-menu { background-color: var(--ar-dk-raised); } /* ==================================================================== * Плитки на странице «Kategorie» * * Снимок в плитке наложен режимом multiply — так белый студийный фон * растворяется в светлой подложке и картинка не выглядит наклейкой. Приём * держится на том, что подложка светлая: multiply умножает цвета, и на * тёмной он умножает всё в чёрное. После переворота подложка стала тёмной, * и вся страница категорий ушла в чернильные квадраты с еле различимым * силуэтом (клиент, 2026-08-31). * * Подложка возвращена к белой — и режим наложения при этом не трогается: * multiply на белом ничего не меняет, то есть приём остаётся на месте для * светлой версии, а тёмная просто перестаёт его ломать. * * Два других места с тем же наложением — миниатюра в тосте и снимок в * сравнении — залиты светлым числом, а не переменной, и переворот их не * задел. Проверено, а не предположено. * ==================================================================== */ :root[data-theme="dark"] .ar-cat-tile_img { background: #ffffff; }