/* * theme-modes.css — v2 Modern Dark / Light Theme * ───────────────────────────────────────────────── * Dark (default) : no class needed on * Light : body.light-mode * * Toggle : #sidebar-dark-toggle (checkbox in .sidebar-darkmode-row) * Storage: localStorage key "siteColorMode" -> "dark" | "light" * * Strategy: override every CSS custom-property so the 150+ compiled * files under assets/css/ automatically cascade into the correct palette * through their existing var() references. * Direct element rules handle anything hardcoded outside var(). */ /* SMOOTH TRANSITION — applied globally so mode-switch animates */ *, *::before, *::after { transition: background-color 0.25s ease, background 0.25s ease, color 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease !important; } img, svg, video, canvas { transition: none !important; } /* ═══════════════════════════════════════════════════ DARK MODE (default) ═══════════════════════════════════════════════════ */ :root, html:not(.light-mode), body:not(.light-mode) { color-scheme: dark; --main-color: #FED358; --main-gradient-start: #FED358; --main-gradient-end: #FFB472; --main_gradient-color: linear-gradient(180deg, #FED358 0%, #FFB472 100%); --main_gradient-color2: linear-gradient(90deg, #FED358 0%, #FFB472 100%); --bg_color_L1: #0b0f23; --bg_color_L2: #111827; --bg_color_L3: #1e2a40; --darkBg: #111827; --text_color_L1: #f1f5f9; --text_color_L2: #cbd5e1; --text_color_L3: #94a3b8; --text_color_L4: #f1f5f9; --Dividing-line_color: #1e2a40; --sheet_detail_bg_color: #111827; --sheet_nva_color: #e8a020; --norm_red-color: #f87171; --norm_green-color: #34d399; --norm_secondary-color: #fbbf24; --norm_Purple-color: #a78bfa; --norm_bule-color: #60a5fa; --Secondary_red_color: #ef4444; --Secondary_green_color: #22c55e; --Secondary_Color1: #2d1b1b; --Secondary_Color2: #1b2d1f; --Secondary_moto_Color9: #f59e0b; --Secondary_moto_Color8: #374151; --icon1: rgba(52, 211, 153, .55); --icon2: rgba(52, 211, 153, .18); --tab1: #2dd4bf; --tab2: #a3e635; --van-background: #0b0f23; --van-background-2: #111827; --van-background-3: #1e2a40; --van-text-color: #f1f5f9; --van-text-color-2: #94a3b8; --van-text-color-3: #64748b; --van-border-color: #1e2a40; --van-active-color: rgba(255,255,255,0.06); --van-cell-background: #111827; --van-cell-group-background: #111827; --van-popup-background: #111827; --van-dialog-background: #111827; --van-dialog-has-title-message-text-color: #cbd5e1; --van-picker-background: #111827; --van-picker-option-text-color: #f1f5f9; --van-picker-confirm-action-color:#FED358; --van-picker-mask-color: linear-gradient(180deg,rgba(11,15,35,.95),rgba(11,15,35,.4)), linear-gradient(0deg,rgba(11,15,35,.95),rgba(11,15,35,.4)); --van-action-sheet-item-background: #111827; --van-action-sheet-item-text-color: #f1f5f9; --van-grid-item-content-background: #111827; --van-collapse-item-content-background: #0b0f23; --van-field-input-text-color: #f1f5f9; --van-circle-layer-color: #1e2a40; --van-slider-inactive-background: #1e2a40; --van-popover-light-background: #111827; --van-calendar-background: #111827; --van-calendar-selected-day-background: #FED358; --van-calendar-selected-day-color: #0b0f23; --van-calendar-range-edge-background: #FED358; --van-radio-label-color: #f1f5f9; --van-checkbox-label-color: #f1f5f9; } /* ═══════════════════════════════════════════════════ LIGHT MODE — body.light-mode (also html.light-mode for FOUC prevention) Modern white theme with proper contrast ratios (WCAG AA+) ═══════════════════════════════════════════════════ */ /* html.light-mode: applied immediately by the script before body exists. Covers the critical page background so users with saved 'light' never see a dark flash. */ html.light-mode, html.light-mode body { background-color: #f1f5f9 !important; color: #0f172a !important; } html.light-mode #app { background: #f1f5f9 !important; } body.light-mode { color-scheme: light; --main-color: #c2820a; --main-gradient-start: #f59e0b; --main-gradient-end: #ef8c0a; --main_gradient-color: linear-gradient(180deg, #f59e0b 0%, #ef8c0a 100%); --main_gradient-color2: linear-gradient(90deg, #f59e0b 0%, #ef8c0a 100%); --bg_color_L1: #f1f5f9 !important; --bg_color_L2: #ffffff !important; --bg_color_L3: #e8edf5 !important; --darkBg: #ffffff !important; --text_color_L1: #0f172a !important; --text_color_L2: #1e293b !important; --text_color_L3: #475569 !important; --text_color_L4: #0f172a !important; --Dividing-line_color: #e2e8f0 !important; --sheet_detail_bg_color: #ffffff !important; --sheet_nva_color: #c2820a !important; --norm_red-color: #dc2626 !important; --norm_green-color: #16a34a !important; --norm_secondary-color: #d97706 !important; --norm_Purple-color: #7c3aed !important; --norm_bule-color: #2563eb !important; --Secondary_red_color: #ef4444 !important; --Secondary_green_color: #22c55e !important; --Secondary_Color1: #fef2f2 !important; --Secondary_Color2: #f0fdf4 !important; --Secondary_moto_Color9: #d97706 !important; --Secondary_moto_Color8: #6b7280 !important; --icon1: rgba(22, 163, 74, .55) !important; --icon2: rgba(22, 163, 74, .15) !important; --tab1: #0d9488 !important; --tab2: #65a30d !important; --van-background: #f1f5f9 !important; --van-background-2: #ffffff !important; --van-background-3: #f8fafc !important; --van-text-color: #0f172a !important; --van-text-color-2: #475569 !important; --van-text-color-3: #94a3b8 !important; --van-border-color: #e2e8f0 !important; --van-active-color: #f1f5f9 !important; --van-cell-background: #ffffff !important; --van-cell-group-background: #f8fafc !important; --van-popup-background: #ffffff !important; --van-dialog-background: #ffffff !important; --van-dialog-has-title-message-text-color: #1e293b !important; --van-picker-background: #ffffff !important; --van-picker-option-text-color: #0f172a !important; --van-picker-confirm-action-color:#c2820a !important; --van-picker-mask-color: linear-gradient(180deg,rgba(241,245,249,.96),rgba(241,245,249,.4)), linear-gradient(0deg,rgba(241,245,249,.96),rgba(241,245,249,.4)) !important; --van-action-sheet-item-background: #ffffff !important; --van-action-sheet-item-text-color: #0f172a !important; --van-grid-item-content-background: #ffffff !important; --van-collapse-item-content-background: #f8fafc !important; --van-field-input-text-color: #0f172a !important; --van-circle-layer-color: #e2e8f0 !important; --van-slider-inactive-background: #e2e8f0 !important; --van-popover-light-background: #ffffff !important; --van-calendar-background: #ffffff !important; --van-calendar-selected-day-background: #f59e0b !important; --van-calendar-selected-day-color: #ffffff !important; --van-calendar-range-edge-background: #f59e0b !important; --van-radio-label-color: #0f172a !important; --van-checkbox-label-color: #0f172a !important; /* Dedicated vars for hardcoded navbar colours in index-af80dbb4.css */ --app-navbar-bg: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 60%, #1e1b4b 100%); --app-navbar-content-bg: transparent; background-color: #f1f5f9 !important; color: #0f172a !important; } /* Extra specificity block — beats sidebar-ui.css second load (body.light-mode at line 2345) which has same (0,2,0) specificity as body.light-mode above. html.light-mode body.light-mode = (1,2,0) wins any (0,2,0) rule regardless of source order. */ html.light-mode body.light-mode { --bg_color_L1: #f1f5f9 !important; --bg_color_L2: #ffffff !important; --bg_color_L3: #e8edf5 !important; --van-background: #f1f5f9 !important; --van-background-2: #ffffff !important; --van-background-3: #f8fafc !important; --van-text-color: #0f172a !important; --van-text-color-2: #475569 !important; --van-text-color-3: #94a3b8 !important; --van-border-color: #e2e8f0 !important; --van-cell-background: #ffffff !important; --van-popup-background: #ffffff !important; --van-picker-background: #ffffff !important; --Dividing-line_color: #e2e8f0 !important; --sheet_detail_bg_color: #ffffff !important; --darkBg: #ffffff !important; background-color: #f1f5f9 !important; color: #0f172a !important; } /* html / body root */ html body.light-mode { background-color: #f1f5f9 !important; } body.light-mode #app { background: #f1f5f9 !important; color: #0f172a !important; } /* Scrollbars */ body.light-mode ::-webkit-scrollbar { width: 6px; height: 6px; } body.light-mode ::-webkit-scrollbar-track { background: #e2e8f0 !important; border-radius: 999px; } body.light-mode ::-webkit-scrollbar-thumb { background: #94a3b8 !important; border-radius: 999px; } body.light-mode ::-webkit-scrollbar-thumb:hover{ background: #64748b !important; } /* Navbar / top bar */ body.light-mode .van-nav-bar, body.light-mode .navbar-fixed { background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 60%, #1e1b4b 100%) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.18) !important; } body.light-mode .van-nav-bar__title { color: #fff !important; font-weight: 700; } body.light-mode .van-nav-bar__left .van-icon, body.light-mode .van-nav-bar__right .van-icon { color: #fff !important; } /* Tabs */ body.light-mode .van-tabs__wrap, body.light-mode .van-tabs__nav { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } body.light-mode .van-tab { color: #475569 !important; font-weight: 500; } body.light-mode .van-tab--active { color: #c2820a !important; font-weight: 700 !important; } body.light-mode .van-tabs__line { background: #f59e0b !important; height: 3px !important; border-radius: 2px !important; } /* Cells */ body.light-mode .van-cell, body.light-mode .van-cell-group { background: #ffffff !important; } body.light-mode .van-cell__title { color: #0f172a !important; font-weight: 600; } body.light-mode .van-cell__value { color: #475569 !important; } body.light-mode .van-cell__label { color: #94a3b8 !important; } body.light-mode .van-cell::after { border-color: #f1f5f9 !important; } body.light-mode .van-list { background: transparent !important; } body.light-mode .van-pull-refresh { background: transparent !important; } /* Inputs */ body.light-mode .van-field { background: #f8fafc !important; border-radius: 10px; border: 1px solid #e2e8f0 !important; } body.light-mode .van-field__body { background: transparent !important; } body.light-mode .van-field__label { color: #374151 !important; font-weight: 600; } body.light-mode .van-field__control { color: #0f172a !important; caret-color: #f59e0b; } body.light-mode input { color: #0f172a !important; background: #f8fafc !important; } body.light-mode input::placeholder, body.light-mode .van-field__placeholder { color: #9ca3af !important; } body.light-mode textarea { color: #0f172a !important; background: #f8fafc !important; } /* Popups / dialogs / action-sheets / pickers */ body.light-mode .van-popup { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 -4px 32px rgba(0,0,0,.12) !important; } body.light-mode .van-dialog { background: #ffffff !important; border-radius: 16px !important; } body.light-mode .van-dialog__header { color: #0f172a !important; font-weight: 700; font-size: 18px; } body.light-mode .van-dialog__content { color: #374151 !important; } body.light-mode .van-dialog__footer { background: #f8fafc !important; border-top: 1px solid #e2e8f0; } body.light-mode .van-action-sheet { background: #ffffff !important; } body.light-mode .van-action-sheet__header { color: #0f172a !important; font-weight: 700; } body.light-mode .van-action-sheet__item { color: #0f172a !important; background: #ffffff !important; } body.light-mode .van-action-sheet__item:hover { background: #f8fafc !important; } body.light-mode .van-action-sheet__cancel { background: #f1f5f9 !important; color: #475569 !important; } body.light-mode .van-picker { background: #ffffff !important; } body.light-mode .van-picker__toolbar { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0; } body.light-mode .van-picker__cancel { color: #64748b !important; } body.light-mode .van-picker__confirm { color: #c2820a !important; font-weight: 700; } body.light-mode .van-picker-column__item { color: #0f172a !important; } /* Buttons */ body.light-mode .van-button--default { background: #e2e8f0 !important; color: #0f172a !important; border-color: #cbd5e1 !important; } body.light-mode .van-button--plain { color: #c2820a !important; border-color: #f59e0b !important; } /* Grid */ body.light-mode .van-grid-item__content { background: #ffffff !important; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.07) !important; } body.light-mode .van-grid-item__text { color: #374151 !important; font-weight: 500; } /* Collapse */ body.light-mode .van-collapse-item__title-text { color: #0f172a !important; font-weight: 600; } body.light-mode .van-collapse-item__title { background: #ffffff !important; border-bottom: 1px solid #f1f5f9; } body.light-mode .van-collapse-item__content { background: #f8fafc !important; color: #374151 !important; } /* Tags */ body.light-mode .van-tag--default { background: #e2e8f0 !important; color: #374151 !important; } body.light-mode .van-tag--primary { background: #dbeafe !important; color: #1d4ed8 !important; } body.light-mode .van-tag--success { background: #dcfce7 !important; color: #15803d !important; } body.light-mode .van-tag--danger { background: #fee2e2 !important; color: #dc2626 !important; } body.light-mode .van-tag--warning { background: #fef3c7 !important; color: #d97706 !important; } /* Checkbox / radio */ body.light-mode .van-checkbox__label, body.light-mode .van-radio__label { color: #0f172a !important; } /* Page wrappers */ body.light-mode .home, body.light-mode .container, body.light-mode .main, body.light-mode .page, body.light-mode [class*="-wrap"], body.light-mode [class*="-container"] { background: transparent !important; color: #0f172a !important; } /* ok_winner */ body.light-mode .ok_winner { background: #ffffff !important; border: 1.5px solid rgba(99,102,241,.25) !important; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.06); color: #0f172a !important; } body.light-mode .ok_winner-wrapper__item { background: #f8fafc !important; color: #0f172a !important; border-bottom: 1px solid #f1f5f9 !important; } body.light-mode .ok_winner .title, body.light-mode .ok_winner .ok_winner-title { color: #0f172a !important; font-weight: 700; } /* Daily profit rank */ body.light-mode .dailyProfitRank { background: transparent !important; } body.light-mode .dailyProfitRank__header { background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%) !important; color: #fff !important; border-radius: 12px 12px 0 0; } body.light-mode .dailyProfitRank__content { background: #ffffff !important; color: #0f172a !important; border-radius: 0 0 12px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); } body.light-mode .dailyProfitRank__item { color: #1e293b !important; border-bottom: 1px solid #f1f5f9 !important; } /* Notice bar */ body.light-mode .noticeBar__container { background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(234,179,8,.06)) !important; border-bottom: 1px solid rgba(245,158,11,.30) !important; } body.light-mode .noticeBar__container-body-text, body.light-mode .noticeBar__container-body-text * { color: #374151 !important; } /* Online games */ body.light-mode .onlineGames__container { background: transparent !important; } body.light-mode .fun-tab-item { background: #e2e8f0 !important; color: #374151 !important; font-weight: 500; } body.light-mode .fun-tab-item.activeClassName { background: linear-gradient(135deg, #f59e0b, #ef8c0a) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(245,158,11,.35) !important; } body.light-mode .onlineGames__container-list__item { background: #ffffff !important; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; overflow: hidden; } body.light-mode .onlineGames__container-list__item span { color: #374151 !important; font-weight: 500; } body.light-mode .game-item, body.light-mode .game-card { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; border-radius: 12px; } /* Footer */ body.light-mode .p3-terms { background: transparent !important; } body.light-mode .p3-terms .v-footer { background: #f1f5f9 !important; color: #374151 !important; } body.light-mode .p3-terms .main_title { color: #c2820a !important; font-weight: 700; } body.light-mode .p3-terms .subtitle-1 { color: #c2820a !important; } body.light-mode .p3-terms .second_footer { background: #e8edf5 !important; color: #374151 !important; } body.light-mode .p3-terms a { color: #2563eb !important; } /* Sidebar */ body.light-mode #desktop-sidebar { background: #ffffff !important; border-right: 1px solid #e2e8f0 !important; } body.light-mode .sidebar-header { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; } body.light-mode .sidebar-darkmode-row { background: #f1f5f9 !important; border-bottom: 1px solid #e2e8f0 !important; } body.light-mode .sidebar-darkmode-label { color: #64748b !important; font-weight: 600; } body.light-mode .sidebar-link { color: #374151 !important; } body.light-mode .sidebar-link:hover, body.light-mode .sidebar-link.active { background: rgba(245,158,11,.10) !important; color: #c2820a !important; } body.light-mode .sidebar-logo-text { color: #0f172a !important; text-shadow: none !important; } body.light-mode #sidebar-backdrop { background: rgba(15,23,42,.4) !important; } /* Wallet */ body.light-mode .Wallet__C, body.light-mode .totalSavings__container { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 2px 12px rgba(0,0,0,.06); } body.light-mode .pay-method-item { background: #ffffff !important; color: #0f172a !important; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); } body.light-mode .pay-method-item.active { border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245,158,11,.25) !important; } body.light-mode .recharge-amount-item { background: #f8fafc !important; color: #0f172a !important; border: 1px solid #e2e8f0; } body.light-mode .recharge-amount-item.active { background: #fef3c7 !important; border-color: #f59e0b !important; color: #92400e !important; } /* Activity / promos */ body.light-mode .activity-item, body.light-mode .promo-item { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 2px 8px rgba(0,0,0,.07); border-radius: 12px; } /* Settings */ body.light-mode .setting-item { background: #ffffff !important; color: #0f172a !important; border-bottom: 1px solid #f1f5f9 !important; } body.light-mode .setting-label { color: #374151 !important; font-weight: 600; } body.light-mode .setting-value { color: #94a3b8 !important; } /* Records */ body.light-mode .record-item, body.light-mode .history-item { background: #ffffff !important; color: #0f172a !important; border-bottom: 1px solid #f1f5f9 !important; } body.light-mode .record-item .amount.win { color: #16a34a !important; font-weight: 700; } body.light-mode .record-item .amount.lose { color: #dc2626 !important; font-weight: 700; } /* Invite */ body.light-mode .invite-card, body.light-mode .affiliate-card { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 4px 16px rgba(0,0,0,.07); border-radius: 16px; } /* Toast */ body.light-mode .van-toast { background: rgba(15,23,42,.88) !important; color: #f1f5f9 !important; backdrop-filter: blur(8px); border-radius: 12px !important; } /* Loading */ body.light-mode .van-loading__circular { color: #f59e0b !important; } /* Empty state */ body.light-mode .van-empty__description { color: #94a3b8 !important; } /* Typography */ body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode h6 { color: #0f172a !important; } body.light-mode p { color: #374151 !important; } body.light-mode a { color: #2563eb !important; } body.light-mode a:hover { color: #c2820a !important; } /* Bottom tab bar (van-tabbar) */ body.light-mode .tabbar, body.light-mode .van-tabbar, body.light-mode .van-tabbar-item { background: #ffffff !important; color: #94a3b8 !important; border-top: 1px solid #e2e8f0 !important; } body.light-mode .van-tabbar-item--active, body.light-mode .van-tabbar-item.active { color: #c2820a !important; } /* ═══════════════════════════════════════════════════════════ HARDCODED OVERRIDES — compiled CSS files use hard colours, not CSS vars, so they must be overpowered explicitly here. ═══════════════════════════════════════════════════════════ */ /* 1. HTML outer-gutter background (html,body { background-color:#9195a3 } in index-806b22ff.css html,body { background-color:#0e0e0f } in index-af80dbb4.css) */ html:has(body.light-mode) { background-color: #f1f5f9 !important; } body.light-mode { background-color: #f0f2f8 !important; } /* 2. Compiled tabbar container — hardcoded #021140 / #19150B (.tabbar__container[data-v-*] { background:#021140 }) Scoped attribute selector is more specific, so !important + broad selector is required. */ body.light-mode .tabbar__container { background: #ffffff !important; box-shadow: 0 -1px 0 #e2e8f0, 0 -4px 16px rgba(0,0,0,.06) !important; } body.light-mode .tabbar__container:hover { background: #f8fafc !important; } body.light-mode .tabbar__container-item { color: #94a3b8 !important; } body.light-mode .tabbar__container-item.active, body.light-mode .tabbar__container-item.router-link-active { color: #c2820a !important; } /* 3. Van-picker / Van-popup--bottom — hardcoded dark-blue in index-af80dbb4.css: .van-popup--bottom { background-color:#041243 } .van-picker { background-color:#041243; color:#ffffff } .van-picker__toolbar { background-color:#0b1d59 } .van-picker__mask { dark rgba gradient } .van-picker__frame { border #141415 } */ body.light-mode .van-popup--bottom { background-color: #ffffff !important; } body.light-mode .van-picker { background-color: #ffffff !important; color: #0f172a !important; } body.light-mode .van-picker__toolbar { background-color: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; } body.light-mode .van-picker__cancel { color: #64748b !important; } body.light-mode .van-picker__confirm { color: #c2820a !important; } body.light-mode .van-picker-column__item { color: #374151 !important; opacity: 1 !important; } body.light-mode .van-picker-column__item--selected { color: #0f172a !important; font-weight: 700; } body.light-mode .van-picker__mask { background-image: linear-gradient(180deg, rgba(248,250,252,0.93), rgba(248,250,252,0.45)), linear-gradient(0deg, rgba(248,250,252,0.93), rgba(248,250,252,0.45)) !important; } body.light-mode .van-picker__frame { border-top-color: #cbd5e1 !important; border-bottom-color: #cbd5e1 !important; } /* 4. Popup close-icon — index.html inline style sets color:#fff !important On a white popup background the X becomes invisible in light mode. */ body.light-mode .van-popup__close-icon, body.light-mode .van-icon.van-icon-cross.van-popup__close-icon { color: #374151 !important; } /* 5. Recharge fixed bottom bar — .Recharge__content-fixed-box has a nearly-black gradient hardcoded */ body.light-mode .Recharge__content-fixed-box { background: #ffffff !important; border-top: 1px solid #e2e8f0 !important; box-shadow: 0 -4px 16px rgba(0,0,0,.06) !important; } body.light-mode .Recharge__content-fixed p { color: #475569 !important; -webkit-text-fill-color: #475569 !important; } body.light-mode .Recharge__content-fixed h2, body.light-mode .Recharge__content-fixed .amount-label { color: #0f172a !important; -webkit-text-fill-color: initial !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; } /* 6. Sidebar active-tab gradient (sidebar-ui.css line 172–177 hardcoded) */ body.light-mode .van-tab--active .tabs-btn { background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important; border-color: rgba(245,158,11,.35) !important; box-shadow: 0 4px 12px rgba(245,158,11,.22) !important; color: #ffffff !important; } /* 7. Action-sheet header — some page CSS hardcodes a red gradient */ body.light-mode .van-action-sheet__header { background: #ffffff !important; color: #0f172a !important; border-bottom: 1px solid #e2e8f0 !important; } /* 8. Van-popup (all types) extra background insurance */ body.light-mode .van-popup { background: #ffffff !important; color: #0f172a !important; } body.light-mode .van-popup--top { background: #ffffff !important; } body.light-mode .van-popup--center { background: #ffffff !important; } /* 9. Van-overlay (backdrop behind popups) */ body.light-mode .van-overlay { background-color: rgba(15,23,42,.50) !important; } /* 10. List / cell backgrounds that some compiled CSS hardens to dark */ body.light-mode .van-cell-group, body.light-mode .van-cell-group--inset { background: #ffffff !important; } body.light-mode .van-cell::after { border-bottom-color: #f1f5f9 !important; } /* 11. Dropdown / select menus */ body.light-mode .van-dropdown-menu__bar { background: #ffffff !important; } body.light-mode .van-dropdown-menu__title { color: #374151 !important; } body.light-mode .van-dropdown-item { background: #ffffff !important; } /* 12. Switch control track */ body.light-mode .van-switch { background: #e5e7eb !important; } body.light-mode .van-switch--on { background: #f59e0b !important; } /* 13. Progress bar track */ body.light-mode .van-progress__pivot { background: #f59e0b !important; color: #fff !important; } /* 14. Dialog */ body.light-mode .van-dialog { background: #ffffff !important; color: #0f172a !important; } body.light-mode .van-dialog__header { color: #0f172a !important; } body.light-mode .van-dialog__message { color: #374151 !important; } body.light-mode .van-dialog__footer { border-top: 1px solid #e2e8f0 !important; } /* ─────────────────────────────────────────────── TRANSITION CONTROL .theme-switching is set briefly during toggle to prevent jarring transitions; CSS vars still animate. ─────────────────────────────────────────────── */ body.no-transition, body.no-transition *, html.no-transition, html.no-transition * { transition: none !important; } /* ═══════════════════════════════════════════════════════════ INLINE