/* ============================================================================ Dark Mode — applied when has class "dark-mode" Uses CSS overrides on top of the Grabit template's light defaults. Toggled by the header button; preference saved in localStorage. ============================================================================ */ body.dark-mode { background-color: #0f1117 !important; color: #e0e0e0 !important; } /* ── Top bar ─────────────────────────────────────────────────────────────── */ body.dark-mode .header-top { background-color: #1a1d2e !important; border-bottom-color: #2a2d3e !important; } body.dark-mode .header-top, body.dark-mode .header-top a, body.dark-mode .header-top .gi-help { color: #b0b3c0 !important; } /* ── Main header ─────────────────────────────────────────────────────────── */ body.dark-mode .gi-header-bottom, body.dark-mode .sticky-header { background-color: #13151f !important; border-bottom-color: #2a2d3e !important; box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important; } body.dark-mode .gi-header-btn, body.dark-mode .gi-header-btn .gi-btn-title, body.dark-mode .gi-header-btn .gi-btn-stitle { color: #c8cad8 !important; } body.dark-mode .gi-header-btn:hover { color: #fff !important; } body.dark-mode .gi-dropdown-menu { background: #1e2130 !important; border-color: #2a2d3e !important; } body.dark-mode .gi-dropdown-menu .dropdown-item { color: #c8cad8 !important; } body.dark-mode .gi-dropdown-menu .dropdown-item:hover { background: #2a2d3e !important; color: #fff !important; } /* ── Navigation bar (the white bar with Home/Shop/Updates links) ─────────── */ body.dark-mode .sticky-nav, body.dark-mode #gi-main-menu-desk, body.dark-mode .gi-header-cat, body.dark-mode .gi-nav-bar, body.dark-mode .gi-header-cat .gi-nav-bar { background-color: #13151f !important; border-color: #2a2d3e !important; } body.dark-mode .gi-main-menu, body.dark-mode #gi-main-menu-desk { background-color: #13151f !important; } body.dark-mode .gi-main-menu ul li a, body.dark-mode .gi-main-menu ul .non-drop a { color: #c8cad8 !important; } body.dark-mode .gi-main-menu ul li a:hover { color: #fff !important; } body.dark-mode .gi-main-menu ul li .sub-menu, body.dark-mode .gi-main-menu ul li .mega-menu { background-color: #1e2130 !important; border-color: #2a2d3e !important; } body.dark-mode .gi-main-menu ul li .sub-menu li a, body.dark-mode .gi-main-menu ul li .mega-menu li a { color: #b0b3c0 !important; } body.dark-mode .gi-main-menu ul li .sub-menu li a:hover { color: #fff !important; } /* ── Search input ────────────────────────────────────────────────────────── */ body.dark-mode .gi-header-search .form-control, body.dark-mode .header-search .form-control, body.dark-mode .gi-search input, body.dark-mode input[type="search"], body.dark-mode input[type="text"].form-control { background-color: #1e2130 !important; border-color: #2a2d3e !important; color: #e0e0e0 !important; } body.dark-mode .gi-header-search .form-control::placeholder, body.dark-mode .header-search .form-control::placeholder { color: #6b6f82 !important; } body.dark-mode .gi-header-search, body.dark-mode .header-search { background-color: #1e2130 !important; border-color: #2a2d3e !important; } body.dark-mode .gi-header-search .gi-search-btn, body.dark-mode .header-search button { color: #b0b3c0 !important; } /* ── All Categories toggle ───────────────────────────────────────────────── */ body.dark-mode .gi-category-menu .gi-category-toggle { background-color: #1e2130 !important; border-color: #2a2d3e !important; color: #c8cad8 !important; } body.dark-mode .gi-category-menu .gi-cat-block, body.dark-mode .gi-category-menu .gi-dropdown { background-color: #1e2130 !important; border-color: #2a2d3e !important; } body.dark-mode .gi-category-menu .gi-dropdown ul li a { color: #b0b3c0 !important; } body.dark-mode .gi-category-menu .gi-dropdown ul li a:hover { color: #fff !important; } /* ── Hero / Banner section ───────────────────────────────────────────────── */ body.dark-mode .gi-banner { background-color: #13151f !important; } body.dark-mode .gi-banner-content h2, body.dark-mode .gi-banner-content h1, body.dark-mode .gi-banner-content p { color: #e0e0e0 !important; } /* ── Section / page backgrounds ─────────────────────────────────────────── */ body.dark-mode .body-bg, body.dark-mode .gi-category, body.dark-mode .gi-products, body.dark-mode .padding-tb-40, body.dark-mode section { background-color: #0f1117 !important; } /* ── Product cards ───────────────────────────────────────────────────────── */ body.dark-mode .gi-product-inner, body.dark-mode .gi-pro-content { background-color: #1a1d2e !important; border-color: #2a2d3e !important; } body.dark-mode .gi-product-inner:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important; } body.dark-mode .gi-pro-content .gi-pro-title a, body.dark-mode .gi-pro-content .gi-pro-title { color: #e0e0e0 !important; } body.dark-mode .gi-pro-content .gi-pro-title a:hover { color: #fff !important; } body.dark-mode .gi-pro-content .gi-price, body.dark-mode .gi-pro-content span { color: #b0b3c0 !important; } body.dark-mode .gi-pro-content .gi-price .new-price { color: var(--brand-accent, #e86c2f) !important; } /* ── Category pills / filter buttons ────────────────────────────────────── */ body.dark-mode .gi-breadcrumb { background-color: #13151f !important; } body.dark-mode .gi-breadcrumb-title, body.dark-mode .gi-breadcrumb-list li a { color: #b0b3c0 !important; } body.dark-mode .gi-breadcrumb-list li.gi-breadcrumb-item.active { color: #e0e0e0 !important; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ body.dark-mode .btn-outline-primary, body.dark-mode .gi-btn-2 { border-color: #2a2d3e !important; color: #c8cad8 !important; background: transparent !important; } body.dark-mode .btn-outline-primary:hover, body.dark-mode .gi-btn-2:hover { background: #2a2d3e !important; color: #fff !important; } body.dark-mode .filter-pill { background: #1e2130 !important; border-color: #2a2d3e !important; color: #b0b3c0 !important; } body.dark-mode .filter-pill.active { background: var(--brand-accent, #e86c2f) !important; border-color: var(--brand-accent, #e86c2f) !important; color: #fff !important; } /* ── Cart drawer / sidebar ───────────────────────────────────────────────── */ body.dark-mode .gi-side-cart, body.dark-mode .gi-cart-view { background-color: #1a1d2e !important; border-color: #2a2d3e !important; } body.dark-mode .gi-cart-view .gi-cart-title, body.dark-mode .gi-cart-view .gi-product-name { color: #e0e0e0 !important; } body.dark-mode .gi-cart-view .gi-price { color: #b0b3c0 !important; } /* ── Mobile menu ─────────────────────────────────────────────────────────── */ body.dark-mode #gi-mobile-menu, body.dark-mode .gi-mobile-menu { background-color: #13151f !important; } body.dark-mode .gi-menu-content ul li a { color: #c8cad8 !important; } body.dark-mode .gi-menu-content ul li a:hover { color: #fff !important; } /* ── Footer ──────────────────────────────────────────────────────────────── */ body.dark-mode .gi-footer-content, body.dark-mode .gi-footer { background-color: #0c0d14 !important; border-top-color: #2a2d3e !important; } body.dark-mode .gi-footer-widget .gi-footer-title { color: #e0e0e0 !important; } body.dark-mode .gi-footer-link a, body.dark-mode .gi-footer-text { color: #8b8e9e !important; } body.dark-mode .gi-footer-link a:hover { color: #e0e0e0 !important; } body.dark-mode .gi-footer-bottom, body.dark-mode .gi-copyright-text { color: #6b6f82 !important; } body.dark-mode .gi-footer-bottom { border-top-color: #2a2d3e !important; } /* ── Forms / inputs ──────────────────────────────────────────────────────── */ body.dark-mode input:not([type=radio]):not([type=checkbox]), body.dark-mode select, body.dark-mode textarea { background-color: #1e2130 !important; border-color: #2a2d3e !important; color: #e0e0e0 !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #6b6f82 !important; } body.dark-mode label { color: #b0b3c0 !important; } /* ── Tables ──────────────────────────────────────────────────────────────── */ body.dark-mode table { color: #e0e0e0 !important; } body.dark-mode th { background-color: #1e2130 !important; color: #b0b3c0 !important; } body.dark-mode td { border-color: #2a2d3e !important; } /* ── Single product / item page ─────────────────────────────────────────── */ body.dark-mode .gi-single-product, body.dark-mode .gi-pro-rightside { background-color: #0f1117 !important; } body.dark-mode .gi-pro-rightside .gi-pro-title { color: #e0e0e0 !important; } body.dark-mode .gi-pro-rightside .gi-price-wrap .new-price { color: var(--brand-accent, #e86c2f) !important; } body.dark-mode .gi-pro-desc p { color: #b0b3c0 !important; } body.dark-mode .nav-tabs { border-color: #2a2d3e !important; } body.dark-mode .nav-tabs .nav-link { color: #b0b3c0 !important; } body.dark-mode .nav-tabs .nav-link.active { background-color: #1e2130 !important; border-color: #2a2d3e #2a2d3e #1e2130 !important; color: #fff !important; } body.dark-mode .tab-content { background-color: #1e2130 !important; border-color: #2a2d3e !important; } /* ── Modals ──────────────────────────────────────────────────────────────── */ body.dark-mode .modal-content { background-color: #1a1d2e !important; border-color: #2a2d3e !important; color: #e0e0e0 !important; } body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: #2a2d3e !important; } body.dark-mode .modal-title { color: #e0e0e0 !important; } body.dark-mode .btn-close { filter: invert(1); } /* ── Basket / checkout page ──────────────────────────────────────────────── */ body.dark-mode .gi-cart-wrapper, body.dark-mode .gi-cart-content { background-color: #0f1117 !important; } body.dark-mode .table-responsive { background-color: #1a1d2e !important; } body.dark-mode .gi-cart-summary { background-color: #1a1d2e !important; border-color: #2a2d3e !important; } body.dark-mode .gi-cart-summary-title { color: #e0e0e0 !important; border-color: #2a2d3e !important; } /* ── Customer / account page ─────────────────────────────────────────────── */ body.dark-mode .gi-vendor-card, body.dark-mode .order-card, body.dark-mode .gi-dashboard { background-color: #1a1d2e !important; border-color: #2a2d3e !important; } /* ── Misc utility ────────────────────────────────────────────────────────── */ body.dark-mode .text-muted { color: #6b6f82 !important; } body.dark-mode hr { border-color: #2a2d3e !important; } body.dark-mode .border, body.dark-mode [class*="border-"] { border-color: #2a2d3e !important; } body.dark-mode .bg-white, body.dark-mode .bg-light { background-color: #1a1d2e !important; } body.dark-mode .card { background-color: #1a1d2e !important; border-color: #2a2d3e !important; } body.dark-mode .card-body { color: #e0e0e0 !important; } /* ── Scrollbar ───────────────────────────────────────────────────────────── */ body.dark-mode ::-webkit-scrollbar { width: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: #13151f; } body.dark-mode ::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 4px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #3a3d4e; } /* ── Dark mode toggle button ─────────────────────────────────────────────── */ .dark-mode-toggle { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 0 0.5rem; color: inherit; display: flex; align-items: center; line-height: 1; opacity: 0.75; transition: opacity 0.2s; } .dark-mode-toggle:hover { opacity: 1; } /* ── Catch-all: any remaining white/light backgrounds ───────────────────── */ body.dark-mode div[style*="background:#fff"], body.dark-mode div[style*="background: #fff"], body.dark-mode div[style*="background-color:#fff"], body.dark-mode div[style*="background-color: #fff"], body.dark-mode div[style*="background:white"], body.dark-mode div[style*="background: white"] { background-color: #1a1d2e !important; } /* ── Bootstrap overrides ─────────────────────────────────────────────────── */ body.dark-mode .form-control, body.dark-mode .form-select { background-color: #1e2130 !important; border-color: #2a2d3e !important; color: #e0e0e0 !important; } body.dark-mode .input-group-text { background-color: #1e2130 !important; border-color: #2a2d3e !important; color: #b0b3c0 !important; } body.dark-mode .list-group-item { background-color: #1a1d2e !important; border-color: #2a2d3e !important; color: #e0e0e0 !important; } body.dark-mode .dropdown-menu { background-color: #1e2130 !important; border-color: #2a2d3e !important; } body.dark-mode .dropdown-item { color: #c8cad8 !important; } body.dark-mode .dropdown-item:hover { background-color: #2a2d3e !important; color: #fff !important; }