/* ============================================= DARK THEME — yash-electronics Apply by adding class "dark-theme" to ============================================= */ body.dark-theme { --title-clr: #e2e2e2; --title-semidark: #aaaaaa; --border1: #2a2a2a; --light-box: #1e1e1e; --bg-section1: #141414; --bg-section2: #181818; --bs-border-color: #2a2a2a; --input-placeholder-color: #777; --white-clr: #1a1a1a; background-color: #191919; color: #e2e2e2; } /* ── Base elements ───────────────────────────── */ body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6 { color: #e8e8e8; } body.dark-theme a { color: #e2e2e2; } body.dark-theme a:hover { color: #ffffff; } body.dark-theme hr { border-color: #2a2a2a; } body.dark-theme p { color: #c8c8c8; } /* ── Cards ───────────────────────────────────── */ body.dark-theme .card, body.dark-theme .login-card { background-color: #1a1a1a; border-color: #2a2a2a; color: #e2e2e2; } body.dark-theme .card-header { background-color: #222222; border-color: #2a2a2a; } body.dark-theme .card-footer { background-color: #1e1e1e; border-color: #2a2a2a; } body.dark-theme .card-body { color: #e2e2e2; } /* ── Forms ───────────────────────────────────── */ body.dark-theme .form-control, body.dark-theme .form-select, body.dark-theme input[type="text"], body.dark-theme input[type="email"], body.dark-theme input[type="password"], body.dark-theme input[type="tel"], body.dark-theme input[type="number"], body.dark-theme textarea, body.dark-theme select { background-color: #202020; border-color: #2a2a2a; color: #e2e2e2; } body.dark-theme .form-control:focus, body.dark-theme .form-select:focus, body.dark-theme input[type="text"]:focus, body.dark-theme input[type="email"]:focus, body.dark-theme input[type="password"]:focus, body.dark-theme textarea:focus { background-color: #2a2a2a; border-color: var(--base); color: #e2e2e2; box-shadow: 0 0 0 3px rgba(var(--bs-base-rgb), 0.2); } body.dark-theme .form-control::placeholder { color: #666; } body.dark-theme .form-label, body.dark-theme label { color: #c8c8c8; } body.dark-theme .input-group-text { background-color: #2a2a2a; border-color: #333333; color: #c8c8c8; } /* ── Navbar / Header ─────────────────────────── */ body.dark-theme .navbar-light, body.dark-theme .navbar { background-color: #000000 !important; border-bottom: 1px solid #2a2a2a; } body.dark-theme .navbar-light .navbar-brand, body.dark-theme .navbar-light .navbar-text { color: #e2e2e2; } body.dark-theme .navbar-tool-text span, body.dark-theme .navbar-tool-text small { color: #c0c0c0 !important; } body.dark-theme .navbar-tool-icon-box { background-color: #252525 !important; } body.dark-theme .navbar-stuck-menu { background-color: var(--base) !important; } body.dark-theme .topbar { background-color: #0d0d0d !important; border-bottom: 1px solid #222; } body.dark-theme .topbar a, body.dark-theme .topbar span, body.dark-theme .topbar p { color: #aaaaaa !important; } body.dark-theme .header-search-form .form-control { background-color: #252525; border-color: #333; color: #e2e2e2; } body.dark-theme .header-search-form .search-suggestion-box { background-color: #1e1e1e; border-color: #2a2a2a; } /* ── Dropdowns ───────────────────────────────── */ body.dark-theme .dropdown-menu { background-color: #1e1e1e; border-color: #333333; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } body.dark-theme .dropdown-item { color: #c8c8c8; } body.dark-theme .dropdown-item:hover, body.dark-theme .dropdown-item:focus { background-color: #2a2a2a; color: var(--base); } body.dark-theme .dropdown-divider { border-color: #2a2a2a; } body.dark-theme .dropdown-header { color: #888; } /* ── Buttons ─────────────────────────────────── */ body.dark-theme .btn-light, body.dark-theme .btn-white { background-color: #2a2a2a; border-color: #333; color: #e2e2e2; } body.dark-theme .btn-light:hover, body.dark-theme .btn-white:hover { background-color: #333; color: #fff; } body.dark-theme .btn-outline-secondary { border-color: #444; color: #c0c0c0; } body.dark-theme .btn-outline-secondary:hover { background-color: #333; border-color: #555; color: #fff; } /* ── Product cards ───────────────────────────── */ body.dark-theme .product-single-hover { background-color: #1a1a1a; } body.dark-theme .product-single-hover .inline_product { background-color: #1e1e1e; border-color: #2a2a2a; } body.dark-theme .product-single-hover:hover .inline_product { border-color: rgba(var(--bs-base-rgb), 0.5); } body.dark-theme .product-single-hover .single-product-details { background-color: #1a1a1a; } body.dark-theme .product-single-hover .single-product-details a, body.dark-theme .product-single-hover .single-product-details h6 { color: #e2e2e2; } body.dark-theme .product-single-hover.style--card { background-color: #1a1a1a; border: 1px solid #2a2a2a; } /* ── Sections / Page backgrounds ────────────── */ body.dark-theme section, body.dark-theme .section { background-color: #191919; } body.dark-theme .bg-white, body.dark-theme .bg-light { background-color: #1a1a1a !important; } body.dark-theme .bg-gray-100, body.dark-theme [style*="background-color: #f"], body.dark-theme [style*="background: #f"] { background-color: #1a1a1a !important; } body.dark-theme .category_div { background: #1e1e1e; border-color: #2a2a2a; } body.dark-theme .for-categories-home { background-color: #141414; } /* ── Hero banner / slider ────────────────────── */ body.dark-theme .main-banner-area, body.dark-theme .banner-area { background-color: #141414; } /* ── Section headers ─────────────────────────── */ body.dark-theme .section-header, body.dark-theme .section-header h2, body.dark-theme .section-title, body.dark-theme .section-title h2 { color: #e2e2e2; } body.dark-theme .view-all-text { color: #fff!important; } body.dark-theme .text-black { color: #e2e2e2 !important; } body.dark-theme .text-muted { color: #888888 !important; } body.dark-theme .text-dark { color: #e2e2e2 !important; } /* ── Tables ──────────────────────────────────── */ body.dark-theme .table { color: #e2e2e2; border-color: #2a2a2a; } body.dark-theme .table thead th, body.dark-theme .table th { background-color: #222222; border-color: #333333; color: #c8c8c8; } body.dark-theme .table td { border-color: #2a2a2a; color: #e2e2e2; } body.dark-theme .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } body.dark-theme .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); color: #fff; } /* ── Modals ──────────────────────────────────── */ body.dark-theme .modal-content { background-color: #1a1a1a; border-color: #2a2a2a; color: #e2e2e2; } body.dark-theme .modal-header { border-color: #2a2a2a; } body.dark-theme .modal-footer { border-color: #2a2a2a; } body.dark-theme .modal-title { color: #e8e8e8; } body.dark-theme .close, body.dark-theme .btn-close { color: #e2e2e2; filter: invert(1) grayscale(1); } /* ── Breadcrumb ──────────────────────────────── */ body.dark-theme .breadcrumb { background-color: #1a1a1a; } body.dark-theme .breadcrumb-item a { color: #aaa; } body.dark-theme .breadcrumb-item.active { color: #777; } body.dark-theme .breadcrumb-item + .breadcrumb-item::before { color: #555; } /* ── Pagination ──────────────────────────────── */ body.dark-theme .page-item .page-link { background-color: #1e1e1e; border-color: #333; color: #c0c0c0; } body.dark-theme .page-item.active .page-link { background-color: var(--base); border-color: var(--base); color: #fff; } body.dark-theme .page-item.disabled .page-link { background-color: #161616; border-color: #2a2a2a; color: #555; } /* ── List groups ─────────────────────────────── */ body.dark-theme .list-group-item { background-color: #1a1a1a; border-color: #2a2a2a; color: #e2e2e2; } body.dark-theme .list-group-item:hover { background-color: #222; } body.dark-theme .list-group-item.active { background-color: var(--base); border-color: var(--base); } /* ── Badges ──────────────────────────────────── */ body.dark-theme .badge-light { background-color: #2a2a2a; color: #c0c0c0; } /* ── Alerts ──────────────────────────────────── */ body.dark-theme .alert-light { background-color: #222; border-color: #333; color: #c8c8c8; } body.dark-theme .alert-info { background-color: #1a2a3a; border-color: #1e3a5a; color: #7bc8f0; } /* ── Footer ──────────────────────────────────── */ body.dark-theme footer, body.dark-theme .footer, body.dark-theme .for-footer { background-color: #0d0d0d !important; border-top: 1px solid #222; color: #aaaaaa; } body.dark-theme footer a, body.dark-theme .footer a { color: #999999; } body.dark-theme footer a:hover, body.dark-theme .footer a:hover { color: #e2e2e2; } body.dark-theme .footer-bottom, body.dark-theme .copyright-area { background-color: #0a0a0a !important; border-top: 1px solid #1e1e1e; color: #666; } /* ── Sidebar / Offcanvas ─────────────────────── */ body.dark-theme .offcanvas { background-color: #1a1a1a; color: #e2e2e2; } body.dark-theme .offcanvas-header { border-bottom: 1px solid #2a2a2a; } body.dark-theme .sidebar, body.dark-theme .cz-sidebar { background-color: #1a1a1a; border-color: #2a2a2a; } /* ── Borders / Dividers ──────────────────────── */ body.dark-theme .border, body.dark-theme .border-top, body.dark-theme .border-bottom, body.dark-theme .border-left, body.dark-theme .border-right { border-color: #2a2a2a !important; } body.dark-theme .border-light { border-color: #2a2a2a !important; } /* ── Brand items ─────────────────────────────── */ body.dark-theme .__brand-item { border-color: #2a2a2a; background-color: #1e1e1e; } /* ── Scrollbar ───────────────────────────────── */ body.dark-theme ::-webkit-scrollbar-track { background: #1a1a1a; } body.dark-theme ::-webkit-scrollbar-thumb { background: #333; } body.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--base) !important; } /* ── Misc utility overrides ──────────────────── */ body.dark-theme .shadow, body.dark-theme .shadow-sm { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important; } body.dark-theme .text-body { color: #e2e2e2 !important; } body.dark-theme .bg-secondary { background-color: #2a2a2a !important; } body.dark-theme code { background-color: #252525; color: #f8a0a0; } body.dark-theme .tab-content { background-color: #1a1a1a; } body.dark-theme .nav-tabs { border-color: #2a2a2a; } body.dark-theme .nav-tabs .nav-link { color: #aaaaaa; } body.dark-theme .nav-tabs .nav-link.active { background-color: #1a1a1a; border-color: #2a2a2a #2a2a2a #1a1a1a; color: #e2e2e2; } body.dark-theme .nav-pills .nav-link { color: #aaaaaa; } body.dark-theme .nav-pills .nav-link.active { background-color: var(--base); color: #fff; } /* ── Accordion ───────────────────────────────── */ body.dark-theme .accordion-item { background-color: #1a1a1a; border-color: #2a2a2a; } body.dark-theme .accordion-button { background-color: #222222; color: #e2e2e2; } body.dark-theme .accordion-button:not(.collapsed) { background-color: #252525; color: var(--base); } body.dark-theme .accordion-body { background-color: #1a1a1a; color: #c8c8c8; } /* ── Home-page specific ──────────────────────── */ body.dark-theme .category_div { background-color: #1e1e1e; border-color: #2a2a2a; } body.dark-theme .category_div span, body.dark-theme .category_div p { color: #c8c8c8; } body.dark-theme .deal-section, body.dark-theme .flash-sale-section { background-color: #141414; } body.dark-theme .product-price { color: #e2e2e2; } body.dark-theme .price-discount, body.dark-theme del { color: #666; } /* ── Login / auth pages ──────────────────────── */ body.dark-theme .premium-login-card .prem-right, body.dark-theme .prem-right { background-color: #1a1a1a; color: #e2e2e2; } body.dark-theme .prem-right .form-heading h1 { color: #e8e8e8; } body.dark-theme .prem-right .form-heading p { color: #999; } body.dark-theme .prem-right .form-control { background: #252525; border-color: #333; color: #e2e2e2; } body.dark-theme .prem-right .form-control:focus { background: #2a2a2a; } body.dark-theme .prem-right .social-media-login-btn { border-color: #333; color: #c0c0c0; background-color: #222; } body.dark-theme .prem-right .social-media-login-btn:hover { border-color: var(--base); background-color: #2a2a2a; } body.dark-theme .prem-or-divider::before, body.dark-theme .prem-or-divider::after { background: #2a2a2a; } body.dark-theme .prem-or-divider span { color: #666; } /* ── Toastr ──────────────────────────────────── */ body.dark-theme .toast-success { background-color: #1a3a1a; } body.dark-theme .toast-error { background-color: #3a1a1a; } /* ── Range inputs ────────────────────────────── */ body.dark-theme input[type="range"] { accent-color: var(--base); } /* ── Custom checkbox / radio ─────────────────── */ body.dark-theme .custom-control-label::before { background-color: #2a2a2a; border-color: #444; } body.dark-theme .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--base); border-color: var(--base); } /* ── Cart / checkout specific ────────────────── */ body.dark-theme .cart-table-wrap, body.dark-theme .checkout-section { background-color: #111; } body.dark-theme .order-summary { background-color: #1a1a1a; border-color: #2a2a2a; } /* ── Product detail page ─────────────────────── */ body.dark-theme .product-details-wrap { background-color: #111; } body.dark-theme .product-info-panel { background-color: #1a1a1a; border-color: #2a2a2a; } /* ── Sticky top bar ──────────────────────────── */ body.dark-theme .sticky-top, body.dark-theme .sticky-header { background-color: #1a1a1a; } .footer-slide-item small, .footer-slide-item .des { color: rgb(247 247 247 / 80%); } .footer-slide-item p, .footer-slide-item .heading { color: #c1c1c1; } .__brands-cate-wrap { color: #b5b5b5; } label:not(.form-check-label):not(.custom-control-label):not( .custom-file-label ):not(.custom-option-label) { color: #aeb4c2; } .search-page-header { background: #1a1a1a; border: 1px solid #2c2c2c; } .deal_of_the_day { border: 1.315px solid #323232; background: #000000 !important; } @media (min-width: 801px) { .__inline-61 .recommended-product-card { background: #000000; } } body.dark-theme .navbar-tool-icon-box { background-color: #00000000 !important; } .navbar-light .navbar-tool-icon-box { color: #ffffff; } .deal_of_the_day .recommended-product-card { background: #000000 !important; margin-bottom: 0 !important; } .__best-selling { background: #232323; } .flash_deal_product { border: 1px solid #272727; } .flash_deal_product { background: #1d1d1d; } .navbar-light .navbar-tool-icon-box.bg-secondary { background-color: #1a1a1a !important; } .web-text-primary, .text-primary { color: #ffffff !important; } .__inline-27 { color: #e6e6e6 !important; } .text-primary, .text-base, .active-menu { color: #e2e2e2 !important; } .widget-cart-top { background: #1a1a1a; } .search_button { background-color: #2a2a2a; } .search-form-mobile .search_button { background-color: #ffffff; } [dir="ltr"] .navbar form .search_button { border-radius: 0 4px 4px 0; } .czi-search { color: #9d9d9d !important; } .navbar-light .navbar-tool:hover .navbar-tool-icon-box.bg-secondary { background-color: #222222 !important; } .navbar-light .navbar-tool:hover .navbar-tool-icon-box { color: #ffffff; } .bg-primary-light { background-color: #191919 !important; } .brand_div { background: #202020; } .bg-ECF1F6 { background-color: #272727 !important; } .search-form-mobile .search-bar-input{ background-color: #ffffff !important; border-color: #ffffff !important; } .search-form-mobile .search-bar-input: focus{ background-color: #ffffff !important; border-color: #ffffff !important; } .search-form-mobile .input-group-text { background-color: #ffffff !important; } .__inline-23 .product-details-shipping-details { background: #191919; color: rgb(255 255 255 / 70%); border: 1px solid #2b2b2b; box-shadow: unset; } .__inline-23 .shipping-details-bottom-border { border-bottom: 1px #2a2a2a solid; } .__inline-61 .shipping-policy-web { background: #191919; border: 1px solid #2f2f2f; } .category-menu-wrap .category-menu { background-color: #191919; border: 1px solid #2c2c2c; } .sorting-item { background: #202020; padding-right: 10px; } .__brands-cate-badge { background: #373737; color: #d2d2d2; } .footer-slide-item { border: 1px solid #3b3b3b; } @media screen and (max-width: 991px) { .search-form-mobile { background: rgb(0 0 0); } .search-form-mobile .search-bar-input { background-color: #1f1f1f !important; border-color: #444444 !important; } } @media screen and (max-width: 767px) { #navbarCollapse { background-color: #181818 !important; } } @media screen and (max-width: 767px) { #navbarCollapse .nav-item a { color: #d9d9d9 !important; display: block; } } @media (max-width: 471px) { .__inline-10 .mega-nav1 { background: #252525; border-radius: 3px; } } @media screen and (max-width: 767px) { #navbarCollapse .dropdown-menu { background: #1a1a1a; } } @media (max-width: 767px) { .__dropdown-menu li:not(:last-child), .__dropdown-menu-2 li:not(:last-child) { border-bottom: 1px solid #373737; } } .__inline-17 { border-bottom: 1px solid #434343; } @media (min-width: 992px) { body{ padding-top: 70px; } } @media (max-width: 991px) { body{ padding-top: 66px !important; } } .table:not(.table-dark) thead:not(.thead-dark) th { color: #dadada; } .mm-view-all a { color: #ffffff !important; font-weight: 600; } .text-black-50 { color: rgba(255, 255, 255, 0.5) !important; } .__cart-total { background: #191919; } .cart_total { background: #191919 0% 0% no-repeat padding-box; }