/* ============================================================ Dark mode for the customer storefront (theme: karenderia_v2) Activated by the `dark` class on (set by the head init script in the layout, from cookie `kmrs_theme` or the device's prefers-color-scheme). Scope every rule under html.dark so the default (light) theme is untouched. ============================================================ */ /* ---- Header theme toggle button (visible in both themes) ---- */ .theme-toggle{ background: transparent; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: inherit; padding: .45rem .6rem; border-radius: 50%; transition: background-color .15s ease, color .15s ease; } .theme-toggle:hover{ background: rgba(0,0,0,.06); } .theme-toggle .icon-to-light{ display: none; } html.dark .theme-toggle{ color: #ffd666; } html.dark .theme-toggle:hover{ background: rgba(255,255,255,.08); } html.dark .theme-toggle .icon-to-dark{ display: none; } html.dark .theme-toggle .icon-to-light{ display: inline-block; } /* ============================================================ Element Plus design tokens (drives el-card, el-button, el-input, el-tag, el-dialog, el-skeleton, el-image, popovers, etc.) ============================================================ */ html.dark{ color-scheme: dark; --el-color-white: #1e1e24; --el-color-black: #ffffff; --el-bg-color: #1e1e24; --el-bg-color-page: #141417; --el-bg-color-overlay: #26262e; --el-text-color-primary: #e8e8ea; --el-text-color-regular: #cdced2; --el-text-color-secondary: #a6a7ad; --el-text-color-placeholder: #8b8c93; --el-text-color-disabled: #6a6b72; --el-border-color: #3a3b44; --el-border-color-light: #33343c; --el-border-color-lighter: #2c2d34; --el-border-color-extra-light: #26272d; --el-border-color-dark: #4a4b57; --el-border-color-darker: #55566380; --el-fill-color: #2a2b33; --el-fill-color-light: #26272d; --el-fill-color-lighter: #222329; --el-fill-color-blank: #1e1e24; --el-fill-color-dark: #2f3038; --el-fill-color-darker: #34353e; --el-mask-color: rgba(0, 0, 0, .72); --el-mask-color-extra-light: rgba(0, 0, 0, .35); --el-box-shadow: 0 2px 12px rgba(0, 0, 0, .5); --el-box-shadow-light: 0 1px 6px rgba(0, 0, 0, .4); --el-box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, .35); --el-box-shadow-dark: 0 4px 18px rgba(0, 0, 0, .6); --el-disabled-bg-color: #26272d; --el-disabled-text-color: #6a6b72; --el-disabled-border-color: #3a3b44; } /* ============================================================ Base page ============================================================ */ html.dark, html.dark body{ background-color: #141417 !important; color: #d6d7db !important; } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark .h1, html.dark .h2, html.dark .h3, html.dark .h4, html.dark .h5, html.dark .h6{ color: #ececee; } html.dark p, html.dark span, html.dark li, html.dark label, html.dark dd, html.dark dt{ color: #cccdd2; } html.dark a{ color: #6fb8ff; } html.dark a:hover{ color: #9bccff; } html.dark hr{ border-color: #34353c; } html.dark small, html.dark .text-muted, html.dark .text-grey, html.dark .text-secondary{ color: #9a9ba1 !important; } html.dark .text-dark, html.dark .text-black{ color: #e6e7ea !important; } /* Backgrounds that are hardcoded white/light in the theme */ html.dark .bg-white, html.dark .bg-light, html.dark .bg-lighter, html.dark .white-bg{ background-color: #1e1e24 !important; color: #d6d7db !important; } /* ============================================================ Surfaces: cards, boxes, list rows, sections, panels ============================================================ */ html.dark .card, html.dark .el-card, html.dark .rounded-box, html.dark .list-item-rows, html.dark .swiperSlide, html.dark .item-image-preview, html.dark .el-collapse, html.dark .el-collapse-item__header, html.dark .el-collapse-item__wrap, html.dark .panel, html.dark .box, html.dark .well{ background-color: #1e1e24 !important; border-color: #33343c !important; color: #d6d7db !important; } html.dark .card .card-header, html.dark .card .card-footer{ background-color: #24242b !important; border-color: #33343c !important; } html.dark .list-item-rows{ border-bottom-color: #2c2d34 !important; } html.dark .hover01:hover, html.dark .list-item-rows:hover{ background-color: #24242b !important; } /* Menu page structure */ html.dark .section-menu, html.dark .menu-left, html.dark .menu-center, html.dark .menu-right, html.dark .sticky-sidebar{ background-color: transparent !important; color: #d6d7db !important; } html.dark .menu-category .nav-link{ color: #c7c8cd; } html.dark .menu-category .nav-link:hover, html.dark .menu-category .nav-link.active{ color: #6fb8ff; } /* Restaurant / merchant header */ html.dark .merchant-top-header, html.dark .top-merchant-details, html.dark .merchant-top-header .right-info{ background-color: #1b1b21 !important; color: #e0e1e5 !important; } /* ============================================================ Top navigation / header / footer ============================================================ */ html.dark #top-navigation, html.dark .top-nav, html.dark header, html.dark .headroom, html.dark .navbar{ background-color: #17171c !important; color: #e2e3e7 !important; border-color: #2a2b31 !important; } html.dark #top-navigation a, html.dark .navbar a, html.dark header a{ color: #dcdde1; } html.dark footer, html.dark .footer, html.dark .sub-footer, html.dark .full-width.footer{ background-color: #101014 !important; color: #b9bac0 !important; border-color: #26272d !important; } html.dark footer a, html.dark .footer a{ color: #c8c9ce; } html.dark footer a:hover{ color: #ffffff; } /* dropdown / user nav menus */ html.dark .dropdown-menu, html.dark .dropdown-menu .dropdown-item{ background-color: #22232a !important; color: #d8d9de !important; } html.dark .dropdown-menu .dropdown-item:hover, html.dark .dropdown-menu .dropdown-item:focus{ background-color: #2c2d35 !important; color: #ffffff !important; } html.dark .dropdown-divider{ border-color: #34353c; } /* ============================================================ Forms & inputs ============================================================ */ html.dark .form-control, html.dark .form-select, html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="number"], html.dark input[type="search"], html.dark input[type="tel"], html.dark input[type="url"], html.dark select, html.dark textarea{ background-color: #26272d !important; border-color: #3a3b44 !important; color: #e6e7ea !important; } html.dark .form-control:focus, html.dark textarea:focus, html.dark select:focus{ background-color: #2a2b32 !important; border-color: #5aa9f0 !important; color: #ffffff !important; box-shadow: 0 0 0 .15rem rgba(90,169,240,.25) !important; } html.dark .form-control::placeholder, html.dark textarea::placeholder{ color: #8b8c93 !important; } html.dark .input-group-text{ background-color: #2a2b32 !important; border-color: #3a3b44 !important; color: #c7c8cd !important; } html.dark .custom-control-label{ color: #d0d1d6; } html.dark .custom-control-label::before{ background-color: #26272d; border-color: #4a4b57; } /* Floating labels (theme uses floating-labels.css) */ html.dark .form-label-group > label, html.dark .form-label-group input:not(:placeholder-shown) ~ label{ color: #9a9ba1; } /* bootstrap-select */ html.dark .bootstrap-select > .dropdown-toggle, html.dark .bootstrap-select .dropdown-menu{ background-color: #26272d !important; color: #e6e7ea !important; border-color: #3a3b44 !important; } /* ============================================================ Buttons ============================================================ */ html.dark .btn-grey, html.dark .btn-light, html.dark .btn-default, html.dark .btn-white{ background-color: #2d2e36 !important; border-color: #3a3b44 !important; color: #e6e7ea !important; } html.dark .btn-grey:hover, html.dark .btn-light:hover{ background-color: #383941 !important; color: #ffffff !important; } html.dark .btn-black{ background-color: #050506 !important; border-color: #050506 !important; color: #ffffff !important; } html.dark .btn-black:hover{ background-color: #1c1c22 !important; } /* keep brand/action buttons readable (green, yellow, etc. stay vivid) */ html.dark .btn-green{ color: #ffffff !important; } html.dark .btn-outline-dark, html.dark .btn-outline-secondary{ color: #d6d7db !important; border-color: #4a4b57 !important; } html.dark .btn-outline-dark:hover{ background-color: #2d2e36 !important; color: #ffffff !important; } /* quantity stepper / size selector pills */ html.dark .qty-btn, html.dark .quantity, html.dark .quantity-parent{ background-color: #2a2b33 !important; color: #e6e7ea !important; border-color: #3a3b44 !important; } html.dark .btn-group-toggle .btn, html.dark .choose-sizex .btn, html.dark .input-group-small .btn{ background-color: #26272d !important; border-color: #3a3b44 !important; color: #d6d7db !important; } html.dark .btn-group-toggle .btn.active, html.dark .btn-group-toggle .btn:active{ background-color: #3a3b44 !important; color: #ffffff !important; } /* ============================================================ Badges, tags, pills, separators ============================================================ */ html.dark .badge-light{ background-color: #2d2e36 !important; color: #e6e7ea !important; } html.dark .badge-yellow{ color: #1a1a1a !important; } html.dark .bg-lighter{ background-color: #26272d !important; } html.dark .info-items-dot-separator{ background-color: #4a4b57 !important; } html.dark .rounded-pill.bg-lighter{ background-color: #2d2e36 !important; } /* ============================================================ Modals, offcanvas, popups ============================================================ */ html.dark .modal-content{ background-color: #1e1e24 !important; color: #e0e1e5 !important; border-color: #34353c !important; } html.dark .modal-header, html.dark .modal-footer{ border-color: #34353c !important; } html.dark .modal-header .close, html.dark .close{ color: #e6e7ea !important; text-shadow: none !important; opacity: .8; } html.dark .modal-backdrop{ background-color: #000; } html.dark .mfp-bg{ background: #000; } /* notyf toasts keep their own colors; nprogress bar */ html.dark #nprogress .bar{ background: #6fb8ff !important; } /* ============================================================ Tables ============================================================ */ html.dark table, html.dark .table{ color: #d6d7db !important; border-color: #34353c !important; } html.dark .table th, html.dark .table td{ border-color: #34353c !important; } html.dark .table thead th{ background-color: #24242b !important; color: #e6e7ea !important; } html.dark .table-striped tbody tr:nth-of-type(odd){ background-color: #202027 !important; } html.dark .table-hover tbody tr:hover{ background-color: #26272e !important; } /* ============================================================ Misc theme bits ============================================================ */ html.dark .chevron, html.dark .read-more{ color: #6fb8ff !important; } html.dark .skeleton-placeholder, html.dark .el-skeleton__item{ background: linear-gradient(90deg, #26272d 25%, #2f3038 37%, #26272d 63%) !important; } html.dark .floating-cart .btn-black{ background-color: #050506 !important; } html.dark .gallery-more{ background-color: rgba(0,0,0,.55) !important; color:#fff !important; } html.dark .border, html.dark .border-top, html.dark .border-bottom, html.dark .border-left, html.dark .border-right, html.dark .borderx{ border-color: #34353c !important; } /* el-image placeholder background while lazy-loading */ html.dark .el-image, html.dark .el-image__placeholder, html.dark .el-image__error{ background-color: #24242b !important; color:#8b8c93 !important; } /* Keep logo thumbnails on a light plate so a dark-coloured logo stays visible against the dark theme (merchant logo uses .img-thumbnail). */ html.dark .el-image.img-thumbnail, html.dark .img-thumbnail{ background-color: #ededed !important; border-color: #3a3b44 !important; } /* Search / typeahead results */ html.dark .typeahead__result, html.dark .typeahead__list, html.dark .tt-menu{ background-color: #22232a !important; color: #d8d9de !important; border-color: #34353c !important; }