/* --------------------------------------------------------------------------- torgo.md — тёмная тема. Файл вне пакета Modesy (/custom/), обновления его не трогают. Подключается из Админка → Настройки → Общие → Custom Header Codes. Штатной тёмной темы в Modesy нет: в style-2.6.css нет ни одного prefers-color-scheme, цвета проставлены вручную по всему файлу (#fff, #222, #f5f5f5 и десяток оттенков серого). Поэтому здесь — своя палитра поверх: переопределяем фоны, текст и границы через переменные, а не инвертируем фильтром, иначе испортились бы фотографии товаров. Включается атрибутом data-theme="dark" на , его ставит наш скрипт. --------------------------------------------------------------------------- */ :root[data-theme="dark"] { --tg-bg: #14171c; /* фон страницы */ --tg-surface: #1c2028; /* карточки, шапка, подвал */ --tg-surface-2: #232833; /* поля ввода, наведение */ --tg-line: #2f3542; /* границы */ --tg-text: #e6e9ef; /* основной текст */ --tg-text-dim: #9aa3b2; /* второстепенный */ color-scheme: dark; /* системные скроллбары и поля тоже тёмные */ } /* --- основа ------------------------------------------------------------- */ :root[data-theme="dark"] body { background-color: var(--tg-bg); color: var(--tg-text) !important; } :root[data-theme="dark"] a { color: var(--tg-text); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] .title, :root[data-theme="dark"] .page-title, :root[data-theme="dark"] .product-title, :root[data-theme="dark"] .section-title { color: var(--tg-text) !important; } :root[data-theme="dark"] p, :root[data-theme="dark"] label, :root[data-theme="dark"] small, :root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .title-desc, :root[data-theme="dark"] .description { color: var(--tg-text-dim) !important; } /* --- поверхности --------------------------------------------------------- */ :root[data-theme="dark"] #header, :root[data-theme="dark"] .main-menu, :root[data-theme="dark"] .top-bar, :root[data-theme="dark"] .nav-mobile-header, :root[data-theme="dark"] .nav-mobile, :root[data-theme="dark"] #footer, :root[data-theme="dark"] .product-card, :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .box, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .mega-menu-content, :root[data-theme="dark"] .dropdown-menu-large, :root[data-theme="dark"] .list-group-item, :root[data-theme="dark"] .option-card, :root[data-theme="dark"] .cookies-warning { background-color: var(--tg-surface) !important; color: var(--tg-text); border-color: var(--tg-line) !important; } :root[data-theme="dark"] .section, :root[data-theme="dark"] .bg-light, :root[data-theme="dark"] .page-contact, :root[data-theme="dark"] .content-container { background-color: transparent !important; } /* --- границы и разделители ---------------------------------------------- */ :root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom, :root[data-theme="dark"] hr, :root[data-theme="dark"] .dropdown-divider, :root[data-theme="dark"] table td, :root[data-theme="dark"] table th { border-color: var(--tg-line) !important; } /* --- формы --------------------------------------------------------------- */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-input, :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .select2-selection, :root[data-theme="dark"] .select2-dropdown { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] ::placeholder { color: #7a8394 !important; } :root[data-theme="dark"] .top-search-bar, :root[data-theme="dark"] .input-search { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; } /* кнопки-«светлые» перекрашиваем, акцентные оставляем как есть */ :root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-default, :root[data-theme="dark"] .btn-secondary { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* --- товары и списки ----------------------------------------------------- */ :root[data-theme="dark"] .product-card .price, :root[data-theme="dark"] .price { color: var(--tg-text) !important; } :root[data-theme="dark"] .product-actions-overlay .action-btn:not(.cart-btn) { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* логотип на светлом фоне остаётся читаемым */ :root[data-theme="dark"] .logo img, :root[data-theme="dark"] .mobile-logo img, :root[data-theme="dark"] .footer-logo img { filter: brightness(0) invert(1); } /* --- наши элементы ------------------------------------------------------- */ :root[data-theme="dark"] .tg-bnav { background-color: rgba(28, 32, 40, .96) !important; border-top-color: var(--tg-line); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { :root[data-theme="dark"] .tg-bnav { background-color: rgba(28, 32, 40, .72) !important; } } :root[data-theme="dark"] .tg-bnav-i { color: #98a1b0 !important; } :root[data-theme="dark"] .tg-bnav-cart.is-empty .tg-bnav-fab { background-color: var(--tg-surface-2); color: var(--tg-text-dim); box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--tg-line); } :root[data-theme="dark"] .tg-bnav-fab::before { border-color: var(--tg-bg); } :root[data-theme="dark"] .tg-bnav-badge { border-color: var(--tg-surface); } :root[data-theme="dark"] .tg-sheet, :root[data-theme="dark"] .tg-pwa-box, :root[data-theme="dark"] .tg-ac-list, :root[data-theme="dark"] .tg-push-offer { background-color: var(--tg-surface) !important; border-color: var(--tg-line); color: var(--tg-text); } :root[data-theme="dark"] .tg-sheet-list a, :root[data-theme="dark"] .tg-sheet-list .btn-logout, :root[data-theme="dark"] .tg-ac-item, :root[data-theme="dark"] .tg-push-row, :root[data-theme="dark"] .tg-pwa-title, :root[data-theme="dark"] .tg-push-offer-title { color: var(--tg-text) !important; } :root[data-theme="dark"] .tg-push-row, :root[data-theme="dark"] .tg-pwa-step-icon, :root[data-theme="dark"] .tg-push-offer-ico, :root[data-theme="dark"] .tg-pwa-close { background-color: var(--tg-surface-2); } :root[data-theme="dark"] .tg-sheet-list a:active, :root[data-theme="dark"] .tg-ac-item:hover, :root[data-theme="dark"] .tg-ac-item.is-active { background-color: var(--tg-surface-2) !important; } :root[data-theme="dark"] .tg-sheet-head, :root[data-theme="dark"] .tg-pwa-step { border-color: var(--tg-line); } :root[data-theme="dark"] .tg-push-sw { background-color: #414958; } /* --- боковая шторка ------------------------------------------------------- У Modesy вкладки «Категории» и «Главное меню» жёстко белые с тёмным текстом (color: #222 !important), а пункты меню — серые оттенки #434343, #555, #777. На тёмном фоне это давало белые плашки и нечитаемый текст. */ :root[data-theme="dark"] .nav-mobile .nav-tabs-mobile-menu .nav-link { background-color: var(--tg-surface-2) !important; color: var(--tg-text-dim) !important; } :root[data-theme="dark"] .nav-mobile .nav-tabs-mobile-menu .nav-link.active { background-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .nav-mobile .navbar-nav .nav-item .nav-link, :root[data-theme="dark"] .nav-mobile .navbar-nav .nav-item .button-link, :root[data-theme="dark"] .nav-mobile .navbar-mobile-categories .nav-link, :root[data-theme="dark"] .nav-mobile .navbar-nav .open .dropdown-menu > li > a, :root[data-theme="dark"] .nav-mobile .profile-dropdown .dropdown-menu > li > a, :root[data-theme="dark"] .nav-mobile .profile-dropdown .dropdown-menu > li .btn-logout, :root[data-theme="dark"] #navbar_mobile_back_button button { color: var(--tg-text) !important; background-color: transparent !important; } :root[data-theme="dark"] .nav-mobile .navbar-nav .nav-item { border-color: var(--tg-line) !important; } :root[data-theme="dark"] .nav-mobile .navbar-mobile-categories .nav-link i, :root[data-theme="dark"] .nav-mobile .navbar-nav .nav-link i { color: var(--tg-text-dim) !important; } /* иконки в меню профиля нарисованы серым stroke — на тёмном теряются */ :root[data-theme="dark"] .nav-mobile .dropdown-menu .icon svg [stroke], :root[data-theme="dark"] .tg-sheet-list .icon svg [stroke] { stroke: var(--tg-text-dim) !important; } :root[data-theme="dark"] .nav-mobile .dropdown-menu .icon svg [fill]:not([fill="none"]), :root[data-theme="dark"] .tg-sheet-list .icon svg [fill]:not([fill="none"]) { fill: var(--tg-text-dim) !important; } /* мобильная шапка и поиск */ :root[data-theme="dark"] .nav-mobile-header-container .btn-open-mobile-nav, :root[data-theme="dark"] .nav-mobile-header-container .a-search-icon, :root[data-theme="dark"] .nav-mobile-header-container i { color: var(--tg-text) !important; } :root[data-theme="dark"] .mobile-search-form { background-color: var(--tg-surface) !important; } /* --- иконки шрифта Modesy ------------------------------------------------ */ :root[data-theme="dark"] .icon-menu, :root[data-theme="dark"] .icon-search, :root[data-theme="dark"] .icon-cart, :root[data-theme="dark"] .icon-heart-o, :root[data-theme="dark"] .icon-user, :root[data-theme="dark"] .icon-close, :root[data-theme="dark"] .icon-arrow-down { color: var(--tg-text) !important; } /* --- подвал, верхняя панель и меню профиля -------------------------------- На скриншоте эти места остались нечитаемыми: у Modesy там свои тёмные оттенки текста поверх бывшего светлого фона. */ :root[data-theme="dark"] #footer, :root[data-theme="dark"] .footer-top, :root[data-theme="dark"] .footer-bottom { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] #footer a, :root[data-theme="dark"] #footer li a, :root[data-theme="dark"] .nav-footer ul li a, :root[data-theme="dark"] .nav-footer-bottom li a, :root[data-theme="dark"] .footer-about, :root[data-theme="dark"] .copyright { color: var(--tg-text-dim) !important; } :root[data-theme="dark"] #footer a:hover, :root[data-theme="dark"] .nav-footer ul li a:hover { color: var(--tg-text) !important; } :root[data-theme="dark"] .footer-title { color: var(--tg-text) !important; } :root[data-theme="dark"] .footer-social-links ul li a { color: var(--tg-text-dim) !important; border-color: var(--tg-line) !important; } /* верхняя панель */ :root[data-theme="dark"] .top-bar, :root[data-theme="dark"] .top-bar .nav-link, :root[data-theme="dark"] .top-bar a, :root[data-theme="dark"] .btn-modal-location, :root[data-theme="dark"] .btn-reset-location { color: var(--tg-text-dim) !important; } :root[data-theme="dark"] .top-bar svg [fill]:not([fill="none"]) { fill: currentColor !important; } /* меню профиля в шапке — на десктопе оно отдельное от мобильного */ :root[data-theme="dark"] .dropdown-menu > li > a, :root[data-theme="dark"] .dropdown-menu .dropdown-item, :root[data-theme="dark"] .dropdown-menu .btn-logout, :root[data-theme="dark"] .profile-dropdown .image-profile-drop { color: var(--tg-text) !important; background-color: transparent !important; } :root[data-theme="dark"] .dropdown-menu > li > a:hover, :root[data-theme="dark"] .dropdown-menu .dropdown-item:hover, :root[data-theme="dark"] .dropdown-menu .btn-logout:hover { background-color: var(--tg-surface-2) !important; } :root[data-theme="dark"] .dropdown-menu .icon svg [stroke] { stroke: var(--tg-text-dim) !important; } :root[data-theme="dark"] .dropdown-menu .icon svg [fill]:not([fill="none"]) { fill: var(--tg-text-dim) !important; } /* главное меню категорий в шапке */ :root[data-theme="dark"] .nav-main, :root[data-theme="dark"] .mega-menu .nav-link, :root[data-theme="dark"] .mega-menu li a { color: var(--tg-text) !important; } /* «Каталог по брендам»: у брендов без логотипа оставались белые рамки */ :root[data-theme="dark"] .brand-item, :root[data-theme="dark"] .brands-container .item, :root[data-theme="dark"] .brand-box { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; } /* --- карточка товара и общие места, замеченные на скриншотах ------------- */ /* шапка: белой оставалась средняя полоса с поиском и меню категорий */ :root[data-theme="dark"] .nav-top, :root[data-theme="dark"] .nav-main, :root[data-theme="dark"] .main-menu, :root[data-theme="dark"] #header .container-fluid { background-color: var(--tg-surface) !important; } :root[data-theme="dark"] .nav-top-right .nav-item a, :root[data-theme="dark"] .label-nav-icon, :root[data-theme="dark"] .nav-top-right i { color: var(--tg-text) !important; } /* хлебные крошки: активный пункт был почти чёрным */ :root[data-theme="dark"] .breadcrumb, :root[data-theme="dark"] .nav-breadcrumb { background-color: transparent !important; } :root[data-theme="dark"] .breadcrumb-item a { color: var(--tg-text-dim) !important; } :root[data-theme="dark"] .breadcrumb-item.active, :root[data-theme="dark"] .breadcrumb-item { color: var(--tg-text) !important; } /* вкладки «Описание / Доставка / Отзывы» */ :root[data-theme="dark"] .nav-tabs, :root[data-theme="dark"] .nav-tabs .nav-link { background-color: transparent !important; border-color: var(--tg-line) !important; color: var(--tg-text-dim) !important; } :root[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--tg-text) !important; border-bottom-color: var(--mds-color-main, #00A99D) !important; } :root[data-theme="dark"] .tab-content, :root[data-theme="dark"] .tab-pane, :root[data-theme="dark"] .product-description, :root[data-theme="dark"] .product-content { background-color: var(--tg-surface) !important; color: var(--tg-text) !important; } /* характеристики: значения (SKU, бренд, статус) уходили в темноту */ :root[data-theme="dark"] .product-details-list, :root[data-theme="dark"] .product-details-list li, :root[data-theme="dark"] .product-details-list span, :root[data-theme="dark"] .product-info span, :root[data-theme="dark"] .list-value, :root[data-theme="dark"] dd, :root[data-theme="dark"] dt { color: var(--tg-text) !important; } /* кнопки с рамкой: «Задать вопрос», «Добавить в список желаний» */ :root[data-theme="dark"] .btn-outline-secondary, :root[data-theme="dark"] .btn-outline-dark, :root[data-theme="dark"] .btn-message, :root[data-theme="dark"] .btn-add-wishlist, :root[data-theme="dark"] .btn-wishlist, :root[data-theme="dark"] .number-spinner button, :root[data-theme="dark"] .number-spinner input { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* блок доставки и кнопка выбора локации */ :root[data-theme="dark"] .product-delivery-est, :root[data-theme="dark"] .product-delivery-est span, :root[data-theme="dark"] .btn-delivery-location, :root[data-theme="dark"] .result-delivery { color: var(--tg-text) !important; } /* «Поделиться» */ :root[data-theme="dark"] .product-share a, :root[data-theme="dark"] .share-links a { color: var(--tg-text-dim) !important; } /* галерея: у товаров фон картинок белый, рамку делаем незаметной */ :root[data-theme="dark"] .product-image-container, :root[data-theme="dark"] .product-thumbnails img { border-color: var(--tg-line) !important; } /* оценки и счётчики */ :root[data-theme="dark"] .review-stars i, :root[data-theme="dark"] .item-wishlist, :root[data-theme="dark"] .product-card .item-wishlist { color: var(--tg-text-dim) !important; } /* --- сплошное осветление текста ------------------------------------------ Modesy расставляет тёмные цвета (#222, #333, #434343, #555, #666, #777) по всему style-2.6.css — точечно их не переловить, всегда останутся почти чёрные надписи на тёмном фоне. Поэтому заставляем ВЕСЬ текст наследовать цвет от body, а исключения перечисляем явно: смысловые цвета, кнопки с заливкой и бейджи должны сохранить свой цвет. Правило идёт последним, чтобы перебить чужие объявления, в том числе с !important. */ :root[data-theme="dark"] :not(.btn):not(.btn *):not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-info"]):not(.badge):not(.badge *):not(.product-card-badge):not(.tg-bnav-badge):not(.notification):not(.message-notification):not(.tg-push-sw):not(.tg-push-sw *):not(.swiper-slide):not(.swiper-slide *):not(.tg-pwa-fab):not(.tg-bnav-fab):not(.tg-bnav-fab *):not(.alert):not(.alert *) { color: inherit; } /* базовый цвет, от которого всё наследуется */ :root[data-theme="dark"] body { color: var(--tg-text) !important; } /* второстепенный текст остаётся приглушённым, но читаемым */ :root[data-theme="dark"] small, :root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .title-desc, :root[data-theme="dark"] .breadcrumb-item a, :root[data-theme="dark"] .copyright, :root[data-theme="dark"] .footer-about, :root[data-theme="dark"] #footer a, :root[data-theme="dark"] .nav-footer ul li a, :root[data-theme="dark"] .top-bar a, :root[data-theme="dark"] .top-bar .nav-link, :root[data-theme="dark"] .tg-ac-region, :root[data-theme="dark"] .tg-push-offer-text, :root[data-theme="dark"] .tg-bnav-i { color: var(--tg-text-dim) !important; } /* ссылки в тексте — акцентом, чтобы отличались от обычного текста */ :root[data-theme="dark"] .product-description a, :root[data-theme="dark"] .tab-content a, :root[data-theme="dark"] .page-content a { color: var(--mds-color-main, #00A99D) !important; } /* «В наличии» и прочие статусы сохраняют смысловой цвет */ :root[data-theme="dark"] .text-success, :root[data-theme="dark"] .in-stock { color: #4ade80 !important; } :root[data-theme="dark"] .text-danger, :root[data-theme="dark"] .out-of-stock { color: #f87171 !important; } /* цена — акцент, как на светлой теме */ :root[data-theme="dark"] .price, :root[data-theme="dark"] .product-card .price { color: var(--tg-text) !important; font-weight: 600; } /* звёзды рейтинга */ :root[data-theme="dark"] .icon-star, :root[data-theme="dark"] .icon-star-o, :root[data-theme="dark"] .review-stars i { color: #f5b544 !important; } /* текст внутри цветных кнопок остаётся белым */ :root[data-theme="dark"] .btn-custom, :root[data-theme="dark"] .btn-custom * , :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-success, :root[data-theme="dark"] .btn-danger { color: #fff !important; } /* --- мини-тумблер темы в верхней панели ----------------------------------- Высоту держим на уровне соседней иконки «Расположение» (16px), чтобы верхняя панель не подросла. */ .tg-theme-mini { display: inline-flex; align-items: center; padding: 0; margin-right: 14px; border: 0; background: none; line-height: 1; cursor: pointer; } /* В верхней панели контент высотой 26px (padding 8px + line-height 26px), поэтому 24px тумблер помещается, не увеличивая бар. */ .tg-theme-track { position: relative; display: block; width: 44px; height: 24px; border-radius: 12px; background-color: rgba(0, 0, 0, .16); transition: background-color .2s ease; } .tg-theme-knob { position: absolute; top: 2px; left: 2px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; color: #6b7280; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s ease, color .2s ease; } .tg-theme-knob svg { width: 13px; height: 13px; stroke-width: 2.2; } .tg-theme-mini.is-on .tg-theme-track { background-color: var(--mds-color-main, #00A99D); } .tg-theme-mini.is-on .tg-theme-knob { transform: translateX(20px); color: var(--mds-color-main, #00A99D); } :root[data-theme="dark"] .tg-theme-track { background-color: #414958; } /* --- единая гамма выпадающих и кнопок ------------------------------------- Ориентир — вкладки «Главное меню» и «Категории»: фон surface-2, активное состояние — line, текст светлый. */ :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .dropdown-menu-large, :root[data-theme="dark"] .mega-menu-content, :root[data-theme="dark"] .select2-dropdown, :root[data-theme="dark"] .select2-results__option, :root[data-theme="dark"] .search-results-ajax, :root[data-theme="dark"] .autocomplete-suggestions, :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .accordion .card, :root[data-theme="dark"] .accordion-button, :root[data-theme="dark"] .panel-heading, :root[data-theme="dark"] .collapse-header, :root[data-theme="dark"] .product-tabs .nav-link, :root[data-theme="dark"] .nav-tabs .nav-link, :root[data-theme="dark"] .nav-pills .nav-link { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .dropdown-menu > li > a:hover, :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .select2-results__option--highlighted, :root[data-theme="dark"] .nav-tabs .nav-link:hover { background-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .nav-tabs .nav-link.active, :root[data-theme="dark"] .nav-pills .nav-link.active, :root[data-theme="dark"] .accordion-button:not(.collapsed), :root[data-theme="dark"] .card-header.active { background-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* содержимое вкладок и аккордеона — фоном поспокойнее, чем заголовок */ :root[data-theme="dark"] .tab-content, :root[data-theme="dark"] .accordion .card-body, :root[data-theme="dark"] .collapse .card-body, :root[data-theme="dark"] .panel-body { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; } /* нейтральные кнопки — той же гаммы */ :root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-default, :root[data-theme="dark"] .btn-secondary, :root[data-theme="dark"] .btn-outline-secondary, :root[data-theme="dark"] .btn-outline-dark, :root[data-theme="dark"] .btn-white, :root[data-theme="dark"] .number-spinner button, :root[data-theme="dark"] .number-spinner input, :root[data-theme="dark"] .page-link { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .btn-light:hover, :root[data-theme="dark"] .btn-default:hover, :root[data-theme="dark"] .btn-secondary:hover, :root[data-theme="dark"] .page-link:hover { background-color: var(--tg-line) !important; } /* --- фотографии товаров --------------------------------------------------- Часть картинок с белым фоном, часть с прозрачным. На тёмном первые выглядели белыми плашками, вторые — обрезанными. Поэтому белым делаем не саму картинку, а КОНТЕЙНЕР: фото ложится на ровное светлое поле, как на светлой теме. Инверсию не применяем — она испортила бы цвета. */ :root[data-theme="dark"] .product-slider-wrapper, :root[data-theme="dark"] .product-slider-wrapper .swiper-slide, :root[data-theme="dark"] .glightbox-product, :root[data-theme="dark"] .media-item, :root[data-theme="dark"] .product-image-box, :root[data-theme="dark"] .product-image-box-lg, :root[data-theme="dark"] .product-image-box-md, :root[data-theme="dark"] .product-card .img-container, :root[data-theme="dark"] .product-card > div:first-child, :root[data-theme="dark"] .col-index-bn img, :root[data-theme="dark"] .featured-categories img { background-color: #fff !important; } :root[data-theme="dark"] .product-image, :root[data-theme="dark"] .default-image, :root[data-theme="dark"] .hover-image, :root[data-theme="dark"] .product-slider-wrapper img, :root[data-theme="dark"] .media-item img { background-color: #fff !important; border-radius: 4px; } /* миниатюры под галереей — тоже на белом, чтобы не рябило */ :root[data-theme="dark"] .product-slider-mobile-media-buttons, :root[data-theme="dark"] .swiper-slide-thumb, :root[data-theme="dark"] .product-thumbnails img { background-color: #fff !important; border-color: var(--tg-line) !important; } /* карточка товара в списке: подпись и цена остаются на тёмном, белым становится только поле под фото */ :root[data-theme="dark"] .product-card { background-color: var(--tg-surface) !important; overflow: hidden; } /* --- мега-меню категорий в шапке ------------------------------------------ Выпадающие подкатегории у Modesy на белом фоне с текстом #222 и светлыми разделителями rgba(0,0,0,.10) — на тёмной теме это белые полотна. */ :root[data-theme="dark"] .mega-menu, :root[data-theme="dark"] .mega-menu .dropdown .dropdown-menu, :root[data-theme="dark"] .mega-menu .dropdown-menu-more-items, :root[data-theme="dark"] .mega-menu .menu-subcategories, :root[data-theme="dark"] .mega-menu .col-category-links, :root[data-theme="dark"] .mega-menu .col-category-images { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] .mega-menu .dropdown .dropdown-menu { border-top-color: var(--tg-line) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); } :root[data-theme="dark"] .mega-menu a, :root[data-theme="dark"] .mega-menu .nav-link, :root[data-theme="dark"] .mega-menu .subcategory-item, :root[data-theme="dark"] .mega-menu .subcategory-item a, :root[data-theme="dark"] .mega-menu .dropdown-menu-more-items a, :root[data-theme="dark"] .mega-menu .menu-category-title { color: var(--tg-text) !important; background-color: transparent !important; } :root[data-theme="dark"] .mega-menu a:hover, :root[data-theme="dark"] .mega-menu .nav-link:hover, :root[data-theme="dark"] .mega-menu .subcategory-item a:hover, :root[data-theme="dark"] .mega-menu .dropdown-menu-more-items a:hover { color: var(--mds-color-main, #00A99D) !important; background-color: var(--tg-surface-2) !important; } /* активный пункт верхнего уровня подчёркивается акцентом */ :root[data-theme="dark"] .mega-menu .nav-item.active > .nav-link, :root[data-theme="dark"] .mega-menu .nav-link.active { border-bottom-color: var(--mds-color-main, #00A99D) !important; } /* картинки категорий в мега-меню — на белом поле, как и фото товаров */ :root[data-theme="dark"] .mega-menu .col-category-images img, :root[data-theme="dark"] .mega-menu img { background-color: #fff !important; border-radius: 4px; } /* «Смотреть все» и прочие ссылки-действия */ :root[data-theme="dark"] .mega-menu .view-all, :root[data-theme="dark"] .mega-menu .show > a { color: var(--mds-color-main, #00A99D) !important; } /* --- кнопки: белая иконка на белом фоне ----------------------------------- Ковровое осветление текста делает светлыми и надписи, и иконки внутри кнопок. Там, где фон кнопки остался белым (btn-filter-product, кнопки сортировки, аккордеоны фильтра), выходила белая иконка на белом. Поэтому красим ВСЕ кнопки, кроме акцентных — у тех фон и так цветной. */ :root[data-theme="dark"] .btn:not(.btn-custom):not(.btn-block):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link):not(.close), :root[data-theme="dark"] .btn-filter-product, :root[data-theme="dark"] .filter-item .btn, :root[data-theme="dark"] .filter-item, :root[data-theme="dark"] .filter-list, :root[data-theme="dark"] .sort-options .btn, :root[data-theme="dark"] .btn-view, :root[data-theme="dark"] .btn-sort { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .btn:not(.btn-custom):not(.btn-block):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) i, :root[data-theme="dark"] .btn:not(.btn-custom):not(.btn-block):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) svg { color: var(--tg-text) !important; } :root[data-theme="dark"] .btn:not(.btn-custom):not(.btn-block):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) svg [stroke] { stroke: currentColor !important; } :root[data-theme="dark"] .btn:not(.btn-custom):not(.btn-block):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) svg [fill]:not([fill="none"]) { fill: currentColor !important; } /* боковая колонка фильтров целиком */ :root[data-theme="dark"] .filter-container, :root[data-theme="dark"] .filters-sidebar, :root[data-theme="dark"] .filter-item .collapse, :root[data-theme="dark"] .filter-options-list, :root[data-theme="dark"] .inputs-filter-price input { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* крестики закрытия остаются видимыми на тёмном */ :root[data-theme="dark"] .close, :root[data-theme="dark"] .close i, :root[data-theme="dark"] .modal-close-rounded { color: var(--tg-text) !important; opacity: 1; } /* иконки в шапке и панелях, нарисованные заливкой */ :root[data-theme="dark"] .nav-top-right svg [fill]:not([fill="none"]), :root[data-theme="dark"] .filter-item svg [fill]:not([fill="none"]) { fill: currentColor !important; } /* --- корзина и оформление заказа ------------------------------------------ Блок сводки справа (Подитог / Всего / Купон) остаётся белым, а текст в нём уже осветлён ковровым правилом — выходит белое на белом. */ /* Настоящая карточка на странице корзины одна — .right (у неё в теме свой фон #f9f9f9). Остальное — раскладка без фона, её оставляем прозрачной, чтобы просвечивал чёрный фон страницы. */ :root[data-theme="dark"] .shopping-cart, :root[data-theme="dark"] .shopping-cart .left, :root[data-theme="dark"] .cart-order-details, :root[data-theme="dark"] .cart-item-details, :root[data-theme="dark"] .cart-section-title, :root[data-theme="dark"] .cart-discount-coupon { background-color: transparent !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .shopping-cart .left { border-bottom-color: var(--tg-line) !important; } :root[data-theme="dark"] .order-summary, :root[data-theme="dark"] .checkout-summary, :root[data-theme="dark"] .payment-methods, :root[data-theme="dark"] .option-card, :root[data-theme="dark"] .shipping-methods, :root[data-theme="dark"] .checkout-steps { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* Белый — только на самом боксе изображения 100×100, не на ячейке. .cart-item-image — table-cell, она тянется на высоту всей строки товара, и белый на ней вылезал прямоугольником под картинкой. */ :root[data-theme="dark"] .cart-item-image { background-color: transparent !important; } :root[data-theme="dark"] .cart-item-image .product-image-box { background-color: #fff !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] .badge-info-light, :root[data-theme="dark"] .badge-danger-light { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* --- кнопки в настройках профиля и заказах -------------------------------- Там Modesy ставит на кнопки классы .color-white / .text-white вместе с .btn-custom, .btn-info и .btn-light. Если фон при этом остаётся светлым, получается белое на белом. Разводим два случая явно. */ /* акцентные кнопки: фон цветной, текст белый — как задумано */ :root[data-theme="dark"] .btn-custom, :root[data-theme="dark"] .btn-custom.color-white, :root[data-theme="dark"] .btn-custom .color-white, :root[data-theme="dark"] .btn-file-upload, :root[data-theme="dark"] .btn-file-upload * { background-color: var(--mds-color-main, #00A99D) !important; border-color: var(--mds-color-main, #00A99D) !important; color: #fff !important; } :root[data-theme="dark"] .btn-info, :root[data-theme="dark"] .btn-info.color-white { background-color: #2f6fb3 !important; border-color: #2f6fb3 !important; color: #fff !important; } :root[data-theme="dark"] .btn-danger, :root[data-theme="dark"] .btn-danger.text-white { background-color: #b64444 !important; border-color: #b64444 !important; color: #fff !important; } /* нейтральные кнопки: фон тёмный, текст светлый. .color-white на них не должен оставлять белый текст на светлом фоне */ :root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-light.color-white, :root[data-theme="dark"] .btn-light * { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* вкладки и боковое меню личного кабинета */ :root[data-theme="dark"] .settings-menu, :root[data-theme="dark"] .settings-menu a, :root[data-theme="dark"] .profile-menu, :root[data-theme="dark"] .profile-menu a, :root[data-theme="dark"] .list-group-item-action, :root[data-theme="dark"] .order-item, :root[data-theme="dark"] .order-box, :root[data-theme="dark"] .table, :root[data-theme="dark"] .table td, :root[data-theme="dark"] .table th { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .settings-menu a:hover, :root[data-theme="dark"] .profile-menu a:hover, :root[data-theme="dark"] .list-group-item-action:hover, :root[data-theme="dark"] .table-hover tbody tr:hover td { background-color: var(--tg-surface-2) !important; } /* --- боковая панель фильтров --------------------------------------------- Блоки шли разными фонами: «Категория» тёмная, «Цена» и «Фильтр по ключевым словам» светлее, снизу вылезала цветная полоса. Приводим все блоки к одному фону. */ :root[data-theme="dark"] .filter-container, :root[data-theme="dark"] .filter-item, :root[data-theme="dark"] .filter-item .card, :root[data-theme="dark"] .filter-item .card-body, :root[data-theme="dark"] .filter-item .collapse, :root[data-theme="dark"] .filter-list, :root[data-theme="dark"] .filter-options-list, :root[data-theme="dark"] .filter-categories, :root[data-theme="dark"] .mds-scrollbar { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] .filter-item .btn, :root[data-theme="dark"] .filter-item .card-header, :root[data-theme="dark"] .inputs-filter-price input, :root[data-theme="dark"] .filter-item input[type="text"] { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .filter-item a, :root[data-theme="dark"] .filter-list a, :root[data-theme="dark"] .filter-item .filter-title { color: var(--tg-text) !important; } :root[data-theme="dark"] .filter-list a:hover { color: var(--mds-color-main, #00A99D) !important; } /* полоса прокрутки внутри списков фильтров */ :root[data-theme="dark"] .mds-scrollbar::-webkit-scrollbar-thumb { background-color: var(--tg-line) !important; } :root[data-theme="dark"] .mds-scrollbar::-webkit-scrollbar-track { background-color: var(--tg-surface) !important; } /* статусы заказов — цветными плашками, как на светлой теме. badge-*-light исключены: у них фон светло-тонированный, белый текст на нём не читается — им нужен свой тёмный фон, он ниже. */ :root[data-theme="dark"] .order-status, :root[data-theme="dark"] .badge:not([class*="-light"]) { color: #fff !important; } /* --- разделы, до которых ещё не дошли скриншоты --------------------------- Блог, вход/регистрация, сообщения, кошелёк, поддержка. Классы взяты из разметки Modesy, а не подобраны наугад. */ :root[data-theme="dark"] .blog-post, :root[data-theme="dark"] .post-item, :root[data-theme="dark"] .post-content, :root[data-theme="dark"] .blog-sidebar, :root[data-theme="dark"] .blog-slider, :root[data-theme="dark"] .comment-item, :root[data-theme="dark"] .support, :root[data-theme="dark"] .ticket-item, :root[data-theme="dark"] .chat-container, :root[data-theme="dark"] .chat-list, :root[data-theme="dark"] .chat-message, :root[data-theme="dark"] .message-item, :root[data-theme="dark"] .wallet-container, :root[data-theme="dark"] .wallet-container-table, :root[data-theme="dark"] .table-custom, :root[data-theme="dark"] .table-responsive, :root[data-theme="dark"] .auth-container, :root[data-theme="dark"] .auth-box, :root[data-theme="dark"] .knowledge-base, :root[data-theme="dark"] .help-center { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .auth-form-input { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* аватары и превью статей — на белом поле, как фото товаров */ :root[data-theme="dark"] .user-img, :root[data-theme="dark"] .user-img img, :root[data-theme="dark"] .post-image, :root[data-theme="dark"] .post-item img { background-color: #fff !important; } /* чужие и свои сообщения различаем оттенком */ :root[data-theme="dark"] .chat-message.own, :root[data-theme="dark"] .message-right { background-color: var(--tg-surface-2) !important; } /* модалки входа и регистрации */ :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-body, :root[data-theme="dark"] .modal-footer { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .modal-backdrop.show { opacity: .7; } /* подписи полей во всех формах */ :root[data-theme="dark"] .control-label, :root[data-theme="dark"] .form-group label { color: var(--tg-text) !important; } /* пагинация и «показать ещё» */ :root[data-theme="dark"] .pagination .page-item .page-link, :root[data-theme="dark"] .btn-load-more { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--mds-color-main, #00A99D) !important; border-color: var(--mds-color-main, #00A99D) !important; color: #fff !important; } /* пустые состояния и заглушки */ :root[data-theme="dark"] .no-results, :root[data-theme="dark"] .empty-state, :root[data-theme="dark"] .cart-empty, :root[data-theme="dark"] .alert-light { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text-dim) !important; } /* --- боковые вкладки кабинета: настройки профиля, заказы ------------------- Реальные классы Modesy — .sidebar-tabs, а не .settings-menu/.profile-menu, на которые я целился раньше. У активной вкладки фон #f3f4f6, а текст мы осветлили — выходило белое на белом. */ :root[data-theme="dark"] .sidebar-tabs .nav .nav-item .nav-link { color: var(--tg-text) !important; background-color: transparent !important; } :root[data-theme="dark"] .sidebar-tabs .nav .nav-link:hover, :root[data-theme="dark"] .sidebar-tabs .nav .active .nav-link { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .sidebar-tabs .nav .active .nav-link { box-shadow: inset 3px 0 0 var(--mds-color-main, #00A99D); } /* иконки вкладок нарисованы инлайновым SVG с прошитым fill="#333333" — на тёмном фоне это почти невидимо, перекрываем на цвет текста */ :root[data-theme="dark"] .sidebar-tabs .nav-link .icon svg path[fill], :root[data-theme="dark"] .sidebar-tabs .nav-link .icon svg g[fill]:not([fill="none"]), :root[data-theme="dark"] .sidebar-tabs .nav-link i { fill: currentColor !important; color: var(--tg-text) !important; } /* первый path в этих иконках — прозрачная подложка 24×24, она без fill, её трогать нельзя, иначе иконка зальётся сплошным квадратом */ :root[data-theme="dark"] .sidebar-tabs .nav-link .icon svg path[fill="none"], :root[data-theme="dark"] .sidebar-tabs .nav-link .icon svg g[fill="none"] { fill: none !important; } :root[data-theme="dark"] .sidebar-tabs-content { color: var(--tg-text); } /* карточка заказа в списке */ :root[data-theme="dark"] .order-list-item { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] .order-list-item .ratio-product-box, :root[data-theme="dark"] .order-list-item .ratio-product-box img { background-color: #fff !important; } :root[data-theme="dark"] .order-list-item .product .flex-item .user a { color: var(--tg-text-dim) !important; } /* светлые бейджи статусов: свой тёмный фон, цвет статуса сохраняем */ :root[data-theme="dark"] .badge-success-light { background-color: rgba(49, 174, 106, .18) !important; color: #5fd398 !important; } :root[data-theme="dark"] .badge-secondary-light { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .badge-danger-light { background-color: rgba(238, 62, 105, .18) !important; color: #ff7d9d !important; } :root[data-theme="dark"] .badge-warning-light { background-color: rgba(235, 179, 0, .18) !important; color: #f0c94a !important; } :root[data-theme="dark"] .badge-primary-light, :root[data-theme="dark"] .badge-info-light { background-color: rgba(0, 151, 240, .18) !important; color: #64bdf7 !important; } /* обложка и аватар в редактировании профиля — светлые заглушки */ :root[data-theme="dark"] .edit-profile-cover, :root[data-theme="dark"] .edit-profile-cover-image, :root[data-theme="dark"] .edit-cover-no-image { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] .img-thumbnail { background-color: #fff !important; border-color: var(--tg-line) !important; } /* заголовок страницы и хлебные крошки */ :root[data-theme="dark"] .page-title, :root[data-theme="dark"] .nav-breadcrumb .breadcrumb, :root[data-theme="dark"] .breadcrumb-item.active { background-color: transparent !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .breadcrumb-item a { color: var(--tg-text-dim) !important; } /* --- боковая колонка фильтров на категориях -------------------------------- Настоящий контейнер называется .product-filters-container (а не .filter-container / .filters-sidebar, которых в Modesy нет). У него в теме только рамка 1px #e5e5e5 и никакого фона — поэтому внутри просвечивал чёрный фон страницы. Заливаем поверхностью до самой рамки. */ :root[data-theme="dark"] .product-filters-container { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; } /* блоки внутри — без собственного фона, чтобы не получалось два оттенка */ :root[data-theme="dark"] .product-filters, :root[data-theme="dark"] .product-filters .filter-item, :root[data-theme="dark"] .product-filters .filter-list, :root[data-theme="dark"] .product-filters .filter-list-container, :root[data-theme="dark"] .product-filters .filter-custom-scrollbar, :root[data-theme="dark"] .product-filters .mds-scrollbar { background-color: transparent !important; } /* разделители между блоками фильтров */ :root[data-theme="dark"] .product-filters .filter-item { border-bottom-color: var(--tg-line) !important; } /* поля: поиск по фильтру и диапазон цены — на ступень светлее контейнера */ :root[data-theme="dark"] .product-filters .filter-item .filter-search-input, :root[data-theme="dark"] .filter-item .form-input, :root[data-theme="dark"] .filter-item .inputs-filter-price .form-control { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* заголовки блоков и кнопка-гармошка */ :root[data-theme="dark"] .product-filters .filter-item .title, :root[data-theme="dark"] .product-filters .filter-item .collapse-title .btn { background-color: transparent !important; color: var(--tg-text) !important; } /* стрелка гармошки нарисована через ::after фоновой картинкой */ :root[data-theme="dark"] .product-filters .filter-item .collapse-title .btn::after { filter: invert(1) brightness(1.6); } :root[data-theme="dark"] .product-filters .filter-item .filter-list li a, :root[data-theme="dark"] .product-filters .filter-item .filter-list li a label, :root[data-theme="dark"] .product-filters .filter-item .subcategory-link, :root[data-theme="dark"] .product-filters .filter-list-categories-parent { color: var(--tg-text) !important; } :root[data-theme="dark"] .product-filters .filter-item .filter-list li a:hover, :root[data-theme="dark"] .product-filters .filter-item .filter-list-subcategories li .active { color: var(--mds-color-main, #00A99D) !important; } /* стрелка «назад к родительской категории» */ :root[data-theme="dark"] .product-filters .filter-item .filter-list-categories-parent svg { fill: currentColor !important; } /* кнопка «Фильтр»: в теме фон #f0f0f4 и текст #333 — оба прошиты */ :root[data-theme="dark"] .filter-item .btn-filter-product { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* чекбоксы фильтров */ :root[data-theme="dark"] .product-filters .custom-checkbox .custom-control-label::before { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] .product-filters .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mds-color-main, #00A99D) !important; border-color: var(--mds-color-main, #00A99D) !important; } /* мобильная кнопка вызова фильтров */ :root[data-theme="dark"] .btn-filter-products-mobile, :root[data-theme="dark"] .product-sort-by { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* --- корзина: правая колонка со сводкой ------------------------------------ Фон висит не на .cart-order-details (та без фона, только раскладка), а на .shopping-cart .right — там #f9f9f9. Осветлённый текст на нём давал белое на белом. */ :root[data-theme="dark"] .shopping-cart .right { background-color: var(--tg-surface) !important; border: 1px solid var(--tg-line); } :root[data-theme="dark"] .shopping-cart .right .line-seperator { background-color: var(--tg-line) !important; } :root[data-theme="dark"] .shopping-cart .right strong, :root[data-theme="dark"] .shopping-cart .right label, :root[data-theme="dark"] .shopping-cart .right .float-right { color: var(--tg-text) !important; } :root[data-theme="dark"] .cart-section-title { border-bottom-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* поле купона внутри светлого блока */ :root[data-theme="dark"] .cart-discount-coupon input { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* главная кнопка действия — акцент, как в светлой теме */ :root[data-theme="dark"] .btn-block { background-color: var(--mds-color-main) !important; border-color: var(--mds-color-main) !important; color: #fff !important; } :root[data-theme="dark"] .btn-block i, :root[data-theme="dark"] .btn-block svg { color: #fff !important; } /* карточка товара в корзине */ :root[data-theme="dark"] .shopping-cart .item, :root[data-theme="dark"] .shopping-cart .list-item { background-color: transparent !important; } :root[data-theme="dark"] .shopping-cart .number-spinner input, :root[data-theme="dark"] .shopping-cart .number-spinner button { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* шаги оформления: адрес, доставка, оплата — те же .right и .row-custom */ :root[data-theme="dark"] .cart-form-billing-address, :root[data-theme="dark"] .cart-shipping-method, :root[data-theme="dark"] .cart-payment-method, :root[data-theme="dark"] .payment-method-item, :root[data-theme="dark"] .cart-location { background-color: transparent !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* сводка заказа: .item-left — тоже table-cell, белый ставим на бокс */ :root[data-theme="dark"] .cart-order-details .item .item-left { background-color: transparent !important; } :root[data-theme="dark"] .cart-order-details .product-image-box, :root[data-theme="dark"] .product-image-box-xs, :root[data-theme="dark"] .product-image-box-sm { background-color: #fff !important; border-color: var(--tg-line) !important; } /* --- светлое на светлом: сплошной проход ------------------------------------ Список собран не на глаз, а выгрузкой из собранного style-2.6.min.css и plugins-2.6.css: все правила, где background* задан светлым тоном (#fff/#f8f9fa/#e9ecef/#eee/#f5f5f5/#f9f9f9/#fafafa/#f0f0f4/#f3f4f6/#f7f7f7). Ковровое осветление текста делает содержимое таких блоков невидимым. Ниже — те из них, что раньше не были покрыты. */ /* единственная переменная темы — светло-серая заливка */ :root[data-theme="dark"] { --bg-gray-light: rgba(255, 255, 255, .04); } /* приставка поля ввода: символ валюты в «Пополнить кошелёк», выплаты. Именно она была белым квадратом слева от суммы. */ :root[data-theme="dark"] .input-group-text, :root[data-theme="dark"] .input-group .input-group-addon, :root[data-theme="dark"] .new-payout-request .input-group-text { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* нативные селекты и поля выбора файла */ :root[data-theme="dark"] .custom-select, :root[data-theme="dark"] .custom-file-label { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .custom-file-label::after { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* заблокированные поля отличаем оттенком, а не светлым фоном */ :root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control[readonly], :root[data-theme="dark"] .custom-select:disabled, :root[data-theme="dark"] .custom-file-input:disabled ~ .custom-file-label, :root[data-theme="dark"] .custom-file-input[disabled] ~ .custom-file-label { background-color: var(--tg-bg) !important; border-color: var(--tg-line) !important; color: var(--tg-text-dim) !important; } /* служебные утилиты Bootstrap */ :root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light, :root[data-theme="dark"] .jumbotron, :root[data-theme="dark"] .badge-light { background-color: var(--tg-surface) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .progress { background-color: var(--tg-surface-2) !important; } :root[data-theme="dark"] .btn-outline-light:hover, :root[data-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled):active { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* варианты товара на карточке: цвет/размер, плитки и заглушки */ :root[data-theme="dark"] .product-options-container .option-swatch, :root[data-theme="dark"] .product-options-container .product-image-placeholder, :root[data-theme="dark"] .product-options-container .option-base.disabled, :root[data-theme="dark"] .product-options-container .option-radio-label.disabled, :root[data-theme="dark"] .product-options-container .custom-select.disabled, :root[data-theme="dark"] .product-options-container .custom-select:disabled { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* кошелёк, выплаты, тикеты, оформление заказа */ :root[data-theme="dark"] .nav-tabs-wallet .nav-item .nav-link, :root[data-theme="dark"] .nav-payout-accounts a, :root[data-theme="dark"] .ticket-container, :root[data-theme="dark"] .tab-checkout-closed, :root[data-theme="dark"] .price-box-container .price-box, :root[data-theme="dark"] .stripe-checkout input { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .nav-tabs-wallet .nav-item .nav-link.active, :root[data-theme="dark"] .nav-payout-accounts a.active { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* сброшенные фильтры и «показать предыдущие» */ :root[data-theme="dark"] .filter-reset-tag, :root[data-theme="dark"] .btn-show-previous-products { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .filter-reset-tag .left button { background-color: transparent !important; color: var(--tg-text) !important; } /* select2 — им сделаны все выпадающие списки регионов и валют */ :root[data-theme="dark"] .select2-container--default .select2-selection--single, :root[data-theme="dark"] .select2-container--default .select2-selection--multiple, :root[data-theme="dark"] .select2-container--classic .select2-selection--single, :root[data-theme="dark"] .select2-dropdown, :root[data-theme="dark"] .select2-container--classic .select2-dropdown, :root[data-theme="dark"] .select2-search__field { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, :root[data-theme="dark"] .select2-results__option { color: var(--tg-text) !important; } :root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], :root[data-theme="dark"] .select2-container--default .select2-results__option--selected { background-color: var(--mds-color-main) !important; color: #fff !important; } :root[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single, :root[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: var(--tg-bg) !important; color: var(--tg-text-dim) !important; } :root[data-theme="dark"] .select2-close-mask { background-color: transparent !important; } /* стрелка select2 нарисована бордерами тёмного цвета */ :root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--tg-text) !important; } /* jQuery UI — на нём сделано автодополнение поиска */ :root[data-theme="dark"] .ui-widget-content, :root[data-theme="dark"] .ui-menu-item-wrapper { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .ui-menu-item-wrapper.ui-state-active { background-color: var(--mds-color-main) !important; color: #fff !important; } /* выпадающий выбор валюты в шапке */ :root[data-theme="dark"] .currency-dropdown ul li button:hover { background-color: var(--tg-surface-2) !important; } /* Просмотр фото (glightbox) намеренно оставляем светлым — там фотографии товаров. Но текст внутри нужно вернуть тёмным, иначе он белый на белом. */ :root[data-theme="dark"] .gslide-description, :root[data-theme="dark"] .gslide-description *, :root[data-theme="dark"] .gslide-inline, :root[data-theme="dark"] .gslide-inline * { color: #222 !important; } /* --- белый прямоугольник справа от меню категорий -------------------------- Это .scroll-btn — кнопки прокрутки строки меню. Фон у них задан не цветом, а ГРАДИЕНТОМ в белое (linear-gradient(to left, white 60%, rgba(255,255,255,0))), поэтому проверка «покрашен ли .nav-main» его не ловит. Подменяем градиент на цвет шапки. */ :root[data-theme="dark"] .nav-main .scroll-btn-left, :root[data-theme="dark"] [dir="rtl"] .nav-main .scroll-btn-right { background: linear-gradient(to right, var(--tg-surface) 60%, transparent) !important; } :root[data-theme="dark"] .nav-main .scroll-btn-right, :root[data-theme="dark"] [dir="rtl"] .nav-main .scroll-btn-left { background: linear-gradient(to left, var(--tg-surface) 60%, transparent) !important; } /* стрелки внутри кнопок прокрутки — в теме #555 */ :root[data-theme="dark"] .nav-main .scroll-btn i { color: var(--tg-text) !important; } /* --- белый прямоугольник справа от строки категорий ------------------------ Настоящая причина: в теме белый фон стоит на ДВУХ элементах — .nav-main и .nav-main .navbar. Я красил только внешний. Внутренний .navbar — флекс-контейнер, а ul.mega-menu (его я тоже красил) сжимается по содержимому, поэтому справа от последнего пункта оставался открытый кусок белого .navbar. */ :root[data-theme="dark"] .nav-main .navbar, :root[data-theme="dark"] .nav-main .navbar-light, :root[data-theme="dark"] .nav-main .container, :root[data-theme="dark"] .nav-top .navbar, :root[data-theme="dark"] .main-menu .navbar { background-color: var(--tg-surface) !important; } /* --- состояния :hover / :focus / :active ----------------------------------- Прошлую выборку светлых фонов я делал по перечню оттенков и пропустил те, которых в перечне не было (#f8f8f8, #f2f2f2, #f4f7fa, #f5f5f5…). Пересобрано по яркости: светлым считается любой цвет, у которого все три канала >= E0. Почти всё, что осталось, — именно состояния наведения: фон светлеет, а текст у нас уже осветлён, и получается белое на белом. */ /* Подсказки поиска. Панель — на тон темнее, подсветка строки — на тон светлее. Если сделать наоборот (панель светлее, наведение темнее), при движении курсора по списку это читается как мигание. */ :root[data-theme="dark"] .search-results-ajax { background-color: var(--tg-surface) !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] .search-results-ajax ul li a { transition: none !important; } :root[data-theme="dark"] .search-results-ajax ul li a:hover { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } :root[data-theme="dark"] .search-results-ajax ul li a i { color: var(--tg-text-dim) !important; } :root[data-theme="dark"] .search-results-ajax ul li .search-item-right span { color: var(--tg-text-dim) !important; } /* поле поиска в шапке */ :root[data-theme="dark"] .top-search-bar .input-search { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* выпадающие меню шапки и профиля */ :root[data-theme="dark"] .profile-dropdown .dropdown-menu li a:hover, :root[data-theme="dark"] .top-menu-dropdown .dropdown-menu li a:hover, :root[data-theme="dark"] .top-menu-dropdown .dropdown-menu li button:hover, :root[data-theme="dark"] .dropdown-item:focus, :root[data-theme="dark"] .dropdown-item:active, :root[data-theme="dark"] .dropdown-item.active, :root[data-theme="dark"] .mega-menu .dropdown-menu-more-items a:active, :root[data-theme="dark"] .mega-menu .dropdown-menu-more-items a:focus, :root[data-theme="dark"] .dropdown-order-options .dropdown .active, :root[data-theme="dark"] .dropdown-order-options .dropdown .dropdown-item:hover, :root[data-theme="dark"] .dropdown-order-options .dropdown .dropdown-item:focus, :root[data-theme="dark"] .dropdown-order-options .dropdown .dropdown-item:active, :root[data-theme="dark"] .btn-social-google:hover { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* подсветка выбранной категории в мега-меню */ :root[data-theme="dark"] .dropdown-menu-large .left .active a, :root[data-theme="dark"] .dropdown-menu-large .left .large-menu-item a:hover { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* вкладки мобильной шторки */ :root[data-theme="dark"] .nav-mobile .nav-tabs-mobile-menu .active, :root[data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* списки */ :root[data-theme="dark"] .list-group-item-action:focus, :root[data-theme="dark"] .list-group-item-action:active, :root[data-theme="dark"] .list-group-item.disabled, :root[data-theme="dark"] .list-group-item:disabled, :root[data-theme="dark"] .list-group-item-light, :root[data-theme="dark"] .list-group-item-light.list-group-item-action:hover, :root[data-theme="dark"] .list-group-item-light.list-group-item-action:focus { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* таблицы */ :root[data-theme="dark"] .table-light, :root[data-theme="dark"] .table-light > td, :root[data-theme="dark"] .table-light > th, :root[data-theme="dark"] .table .thead-light th, :root[data-theme="dark"] .table-hover .table-light:hover, :root[data-theme="dark"] .table-hover .table-light:hover > td, :root[data-theme="dark"] .table-hover .table-light:hover > th, :root[data-theme="dark"] .support table tr:hover { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* кнопки: неактивные и сфокусированные состояния */ :root[data-theme="dark"] .btn-light.focus, :root[data-theme="dark"] .btn-light:focus, :root[data-theme="dark"] .btn-light.disabled, :root[data-theme="dark"] .btn-light:disabled, :root[data-theme="dark"] .btn-gray, :root[data-theme="dark"] .btn-default:active, :root[data-theme="dark"] .btn-default:focus, :root[data-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled).active, :root[data-theme="dark"] .show > .btn-outline-light.dropdown-toggle, :root[data-theme="dark"] .swal2-cancel { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* флажки и переключатели */ :root[data-theme="dark"] .custom-control-label::before, :root[data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label::before, :root[data-theme="dark"] .custom-control-input[disabled] ~ .custom-control-label::before { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; } :root[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mds-color-main) !important; border-color: var(--mds-color-main) !important; } /* переписка и тикеты */ :root[data-theme="dark"] .chat-left .chat-contacts .item .chat-contact.active, :root[data-theme="dark"] .chat-left .chat-contacts .item .chat-contact:hover, :root[data-theme="dark"] .chat-right .chat-header .chat-user .btn-chat-delete, :root[data-theme="dark"] .chat .chat-content .messages .message .message-text, :root[data-theme="dark"] .chat .chat-content .chat-input input, :root[data-theme="dark"] .select-chat-container label, :root[data-theme="dark"] .ticket-content .media .media-body, :root[data-theme="dark"] .support .uploaded-files .item .item-inner { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* блог: метки и категории */ :root[data-theme="dark"] .blog-content .blog-categories li a, :root[data-theme="dark"] .blog-content .blog-tags ul li a, :root[data-theme="dark"] .blog-content .post-tags ul li a { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* Карточка товара и галерея. Кнопку корзины исключаем: она акцентная и красится в custom/theme, а этот !important перебил бы акцент независимо от порядка подключения файлов. */ :root[data-theme="dark"] .product-card .action-btn:not(.cart-btn), :root[data-theme="dark"] .product-description .tab-content .card-header, :root[data-theme="dark"] .edit-profile-cover .edit-avatar { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* аватар автора отзыва — на белом, как фото */ :root[data-theme="dark"] .reviews-container .list-reviews .media img { background-color: #fff !important; } /* партнёрская программа и заработок */ :root[data-theme="dark"] .section-affiliate-colored, :root[data-theme="dark"] .earnings-boxes .earnings-box, :root[data-theme="dark"] .modal-pricing-table .modal-content { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* множественный select2 — плашки выбранных значений */ :root[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice, :root[data-theme="dark"] .select2-container--classic .select2-selection--multiple .select2-selection__choice, :root[data-theme="dark"] .select2-container--classic .select2-selection--multiple { background-color: var(--tg-surface-2) !important; border-color: var(--tg-line) !important; color: var(--tg-text) !important; } /* выделение найденного текста: фон светло-жёлтый, значит текст тёмный */ :root[data-theme="dark"] mark, :root[data-theme="dark"] .mark, :root[data-theme="dark"] .alert-secondary { color: #222 !important; } /* поле в фокусе не должно белеть */ :root[data-theme="dark"] .form-control:focus { background-color: var(--tg-surface-2) !important; color: var(--tg-text) !important; } /* неактивная страница пагинации */ :root[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--tg-surface) !important; color: var(--tg-text-dim) !important; } /* --- стрелки Swiper: белая стрелка на белом кружке ------------------------ Кружок у стрелок белый намеренно — он лежит поверх фотографии слайда и поверх карточек брендов, в обеих темах так и должно быть. Ломался только САМ значок: он рисуется псевдоэлементом ::after и берёт цвет с кнопки (#222), а ковровое осветление делало его светлым. В прошлой выборке светлых фонов классы swiper я отфильтровал как «сторонний плагин» — это и был пропуск. */ :root[data-theme="dark"] .swiper-button-next, :root[data-theme="dark"] .swiper-button-prev, :root[data-theme="dark"] .swiper-button-next::after, :root[data-theme="dark"] .swiper-button-prev::after, :root[data-theme="dark"] .swiper-carousel .swiper-button-next::after, :root[data-theme="dark"] .swiper-carousel .swiper-button-prev::after, :root[data-theme="dark"] .main-slider .swiper-button-next::after, :root[data-theme="dark"] .main-slider .swiper-button-prev::after, :root[data-theme="dark"] .swiper-carousel-brand .swiper-button-next::after, :root[data-theme="dark"] .swiper-carousel-brand .swiper-button-prev::after { color: #222 !important; } /* кружок оставляем светлым, чтобы стрелка читалась на любой фотографии */ :root[data-theme="dark"] .swiper-button-next, :root[data-theme="dark"] .swiper-button-prev { background-color: rgba(255, 255, 255, .88) !important; } :root[data-theme="dark"] .swiper-button-next:hover, :root[data-theme="dark"] .swiper-button-prev:hover { background-color: #fff !important; } /* точки-пагинация слайдера */ :root[data-theme="dark"] .swiper-pagination-bullet { background-color: rgba(255, 255, 255, .55) !important; } :root[data-theme="dark"] .swiper-pagination-bullet-active { background-color: #fff !important; } /* подложка плитки категории, видна пока грузится фото */ :root[data-theme="dark"] .featured-categories .card-columns .card, :root[data-theme="dark"] .featured-categories .item-category-round .category-image { background-color: var(--tg-surface-2) !important; } /* карточки брендов остаются светлыми в обеих темах: логотипы нарисованы для светлого фона, на тёмном половина из них исчезнет */ :root[data-theme="dark"] .swiper-carousel-brand .brand-item { background-color: #fff !important; border-color: transparent !important; } /* --- печать: всегда светлая --------------------------------------------- */ @media print { :root[data-theme="dark"] body { background-color: #fff; color: #000 !important; } }