/** * Dark mode overrides for theme chrome — header, footer, cards, nav, * sidebar widgets, breadcrumbs, comments, forms. Targets the same * [data-sbg-theme="dark"] attribute the plugin's SBG_Dark_Mode module (or * this theme's own inc/dark-mode.php fallback) sets on , so both * systems drive one consistent palette regardless of which one is active. * The plugin's own components (widgets, buy boxes, etc.) already carry * their own dark overrides in its assets/css/sbg-frontend.css — this file * only needs to cover what the theme itself renders. */ [data-sbg-theme="dark"] { --sbg-header-bg: #1A2332; --sbg-header-border: #2D3B4F; --sbg-body-bg: #0F1419; --sbg-body-text: #E2E8F0; --sbg-muted-text: #94A3B8; --sbg-border-color: #2D3B4F; --sbg-card-bg: #1A2332; --sbg-color-light-gray: #1E293B; --sbg-footer-bg: #0B0F14; --sbg-footer-text: #94A3B8; } [data-sbg-theme="dark"] body { background: var(--sbg-body-bg); color: var(--sbg-body-text); } [data-sbg-theme="dark"] .sbg-header, [data-sbg-theme="dark"] .sbg-mobile-menu, [data-sbg-theme="dark"] .sbg-header-search { background: var(--sbg-header-bg); border-color: var(--sbg-header-border); } [data-sbg-theme="dark"] .sbg-nav-menu .sub-menu { background: var(--sbg-card-bg); border-color: var(--sbg-border-color); } [data-sbg-theme="dark"] .sbg-nav-menu .sub-menu a:hover { background: rgba(255,255,255,0.05); } [data-sbg-theme="dark"] .sbg-card, [data-sbg-theme="dark"] .sbg-review-buybox, [data-sbg-theme="dark"] .sbg-verdict-buy, [data-sbg-theme="dark"] .sbg-verdict-avoid, [data-sbg-theme="dark"] .sbg-deal-price-box, [data-sbg-theme="dark"] .sbg-coupon-box, [data-sbg-theme="dark"] .sbg-faq-item, [data-sbg-theme="dark"] .sbg-category-tile, [data-sbg-theme="dark"] .sbg-summary-box, [data-sbg-theme="dark"] .sbg-hero { background: var(--sbg-card-bg); border-color: var(--sbg-border-color); } [data-sbg-theme="dark"] .sbg-glance-table th.sbg-glance-current, [data-sbg-theme="dark"] .sbg-glance-table td.sbg-glance-current { background: var(--sbg-color-light-gray, #1E293B); } [data-sbg-theme="dark"] .sbg-glance-table th, [data-sbg-theme="dark"] .sbg-glance-table td { border-color: var(--sbg-border-color); } [data-sbg-theme="dark"] .sbg-comment-body, [data-sbg-theme="dark"] .sbg-specs-table th, [data-sbg-theme="dark"] .sbg-specs-table td { border-color: var(--sbg-border-color); } [data-sbg-theme="dark"] .sbg-comment-form input[type="text"], [data-sbg-theme="dark"] .sbg-comment-form input[type="email"], [data-sbg-theme="dark"] .sbg-comment-form input[type="url"], [data-sbg-theme="dark"] .sbg-comment-form textarea, [data-sbg-theme="dark"] .search-form .search-field { background: var(--sbg-color-light-gray, #1E293B); border-color: var(--sbg-border-color); color: var(--sbg-body-text); } [data-sbg-theme="dark"] .sbg-filter-chip, [data-sbg-theme="dark"] .sbg-pagination .page-numbers, [data-sbg-theme="dark"] .sbg-other-retailers-list a, [data-sbg-theme="dark"] .sbg-coupon-code { background: var(--sbg-color-light-gray, #1E293B); color: var(--sbg-body-text); } [data-sbg-theme="dark"] .sbg-404-code { color: var(--sbg-color-light-gray, #1E293B); } /* Auto scheme (no explicit choice saved) respects the OS preference too */ @media (prefers-color-scheme: dark) { html:not([data-sbg-theme]) { --sbg-header-bg: #1A2332; --sbg-body-bg: #0F1419; --sbg-body-text: #E2E8F0; } }