/* ========================================================================== Shop Fusion Dark Mode Overrides Applied when has the .dark-mode class ========================================================================== */ /* -------------------------------------------------------------------------- Navbar -------------------------------------------------------------------------- */ .dark-mode .sf-navbar { background: linear-gradient(135deg, #0f0d2e 0%, #1a1744 50%, #0f0d2e 100%); border-bottom-color: rgba(255, 255, 255, 0.05); } /* -------------------------------------------------------------------------- Bootstrap Overrides -------------------------------------------------------------------------- */ .dark-mode .card { background-color: var(--sf-bg-card); border-color: var(--sf-border); color: var(--sf-text-primary); } .dark-mode .form-control, .dark-mode .form-select { background-color: var(--sf-bg-card); border-color: var(--sf-border); color: var(--sf-text-primary); } .dark-mode .form-control:focus, .dark-mode .form-select:focus { background-color: var(--sf-bg-card); border-color: var(--sf-primary); color: var(--sf-text-primary); } .dark-mode .table { color: var(--sf-text-primary); --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.03); } .dark-mode .modal-content { background-color: var(--sf-bg-card); border-color: var(--sf-border); color: var(--sf-text-primary); } .dark-mode .dropdown-menu { background-color: var(--sf-bg-card); border-color: var(--sf-border); } .dark-mode .dropdown-item { color: var(--sf-text-primary); } .dark-mode .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.05); } .dark-mode .dropdown-divider { border-color: var(--sf-border); } .dark-mode .list-group-item { background-color: var(--sf-bg-card); border-color: var(--sf-border); color: var(--sf-text-primary); } .dark-mode .alert { border-color: var(--sf-border); } .dark-mode .breadcrumb { --bs-breadcrumb-divider-color: var(--sf-text-secondary); --bs-breadcrumb-item-active-color: var(--sf-text-primary); } .dark-mode .breadcrumb-item a { color: var(--sf-primary-light); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .dark-mode .sf-footer { background: linear-gradient(135deg, #070619 0%, #0f0d2e 50%, #070619 100%); } /* -------------------------------------------------------------------------- FABs -------------------------------------------------------------------------- */ .dark-mode .sf-fab { background: var(--sf-bg-card); border-color: var(--sf-border); color: var(--sf-text-primary); } /* -------------------------------------------------------------------------- Toasts -------------------------------------------------------------------------- */ .dark-mode .sf-toast { background: var(--sf-bg-card); border-color: var(--sf-border); color: var(--sf-text-primary); } /* -------------------------------------------------------------------------- Page-level -------------------------------------------------------------------------- */ .dark-mode .text-muted { color: var(--sf-text-secondary) !important; } .dark-mode .border { border-color: var(--sf-border) !important; } .dark-mode .bg-white { background-color: var(--sf-bg-card) !important; } .dark-mode .bg-light { background-color: var(--sf-bg) !important; } .dark-mode .text-dark { color: var(--sf-text-primary) !important; } /* Stripe card element */ .dark-mode #card-element { background-color: var(--sf-bg-card); border-color: var(--sf-border); } /* Search suggestions */ .dark-mode .sf-search-suggestions { background: var(--sf-bg-card); border-color: var(--sf-border); } .dark-mode .sf-search-suggestion-item:hover { background: rgba(255, 255, 255, 0.05); }