/* ========================================================================== PromoChat — colour themes Every colour in the app comes from these tokens, so switching the theme changes one attribute on and nothing else needs to know. ========================================================================== */ :root{ color-scheme:light; --page:#f8f8fc; --card:#fff; --ink:#202335; --muted:#7a8098; --line:#e9eaf2; --soft:#f6f6fb; --shadow:0 10px 32px rgba(64,42,130,.08); --bubble-in:#eeeef4; --input-bg:#fff; --raised:#f5f4f9; /* The thread has a surface of its own, a shade off the page, so an incoming white bubble reads as a card sitting on it rather than blending in. It was being flattened to --page by the generic rule below. */ --chat-bg:#ece7f5; } html[data-theme="dark"]{ color-scheme:dark; --page:#12101c; --card:#1b1828; --ink:#eceaf4; --muted:#9a95b0; --line:#2c2740; --soft:#211d31; --shadow:0 10px 32px rgba(0,0,0,.4); --bubble-in:#2a2540; --input-bg:#221e33; --raised:#252038; --chat-bg:#161226; --purple:#8b6cf7; --violet:#a78bfa; --deep:#cdc2f5; --green:#34d399; --blue:#60a5fa; --pink:#f472b6; --orange:#fbbf24; --nav-idle:#a29dba; --nav-hover:#2a2440; --nav-active:linear-gradient(90deg,#7c56f5,#9366f7); --shadow-sm:0 2px 10px rgba(0,0,0,.3); --ring:0 0 0 3px rgba(139,108,247,.22); } /* Follow the device when the person has not chosen for themselves. */ @media (prefers-color-scheme:dark){ html:not([data-theme="light"]){ color-scheme:dark; --page:#12101c; --card:#1b1828; --ink:#eceaf4; --muted:#9a95b0; --line:#2c2740; --soft:#211d31; --shadow:0 10px 32px rgba(0,0,0,.4); --bubble-in:#2a2540; --input-bg:#221e33; --raised:#252038; --chat-bg:#161226; --purple:#8b6cf7; --violet:#a78bfa; --deep:#cdc2f5; --green:#34d399; --blue:#60a5fa; --pink:#f472b6; --orange:#fbbf24; --nav-idle:#a29dba; --nav-hover:#2a2440; --nav-active:linear-gradient(90deg,#7c56f5,#9366f7); --shadow-sm:0 2px 10px rgba(0,0,0,.3); --ring:0 0 0 3px rgba(139,108,247,.22); } } /* ---- surfaces that were hard-coded white before ---- This sheet loads last, so a generic surface listed here beats a component's own colour no matter how it was written. Two widgets paint themselves and must be left alone: the wallet card's purple gradient (it was being turned into white-on-white in the light theme) and the campaign card's tint. Both are excluded by name rather than fought with !important; the dark theme gives the campaign card its own surface further down. */ body{background:var(--page);color:var(--ink)} .topbar,.sidebar,.post-card,.content-card, .widget:not(.wallet-widget):not(.campaign-widget),.settings-card,.card,.entity-card, .campaign-card,.stories,.composer,.chat-shell,.modal-card,.metric-card,.profile-hero, .space-hero,.mobile-nav,.account-dropdown,.thread-menu-panel,.emoji-panel,.chat-side, .pc-card,.kyc-status,.package-card,.feed-tabs,.feed-pager,.earning-split span, .settings-grid>aside,.drawer-card,.reaction-picker,.msg-react-picker,.bubble-actions, .load-older,.suggest-card,.incoming-call{background:var(--card);border-color:var(--line)} .chat-person,.chat-shell>section,.chat-shell>aside{background:var(--card)} .chat-person.active{background:var(--soft)} .messages{background:var(--chat-bg)} .received,.comment-bubble,.reply-quote{background:var(--bubble-in);color:var(--ink)} .received .reply-quote{background:var(--soft)} input,textarea,select{background:var(--input-bg);color:var(--ink);border-color:var(--line)} input::placeholder,textarea::placeholder{color:var(--muted)} .global-search,.chat-search,.comment-row input,.message-box input,.icon-button, .chip-amount,.tab,.msg-chip,.mini-btn,.secondary-btn,.logout-btn,.thread-menu-toggle, .emoji-btn,.message-box .attach,.chat-call-actions button,.new-group-btn{background:var(--raised);color:var(--ink);border-color:var(--line)} th{background:var(--soft);color:var(--muted)} td{border-color:var(--line)} tbody tr:hover{background:var(--soft)} .about-grid span,.team-list span,.pick-list,.search-hits a,.media-cell,.tag-cloud span, .security-grid span,.notification-list>a.is-new,.post-link,.post-edit-form, .post-moderation,.row-actions.adjust,.dev-code,.pager a{background:var(--soft);border-color:var(--line)} html[data-theme="dark"] .avatar-fallback{background:linear-gradient(135deg,#3c3355,#4a2f47);color:#e6dfff} html[data-theme="dark"] .entity-logo{background:linear-gradient(135deg,#332b4d,#4a2f47);color:var(--violet)} html[data-theme="dark"] .notice{background:#2e2718;color:#e8c979;border-color:#4a3d1d} html[data-theme="dark"] .toast{background:#1d3a2e;color:#7fe3b8} html[data-theme="dark"] .toast.error{background:#3a1d29;color:#f7a8c4} html[data-theme="dark"] .toast.warning{background:#3a3018;color:#f0cd85} html[data-theme="dark"] .auth-body,html[data-theme="dark"] .login-panel{background:var(--page)} html[data-theme="dark"] .auth-card,html[data-theme="dark"] .setup-card{background:var(--card)} html[data-theme="dark"] .status{background:var(--soft);color:var(--muted)} html[data-theme="dark"] .legal-shell{background:var(--card)} html[data-theme="dark"] .gallery-cell,html[data-theme="dark"] .bubble video{background:#000} html[data-theme="dark"] img.post-media{background:var(--soft)} /* ---- chat bubbles ---- Incoming messages are a card on a tinted ground, WhatsApp style, so the tail has to follow the same surface in both themes. */ .received{background:var(--card);color:var(--ink)} .received:not(.is-grouped):before{background:var(--card)} .sent:not(.is-grouped):before{background:var(--purple)} html[data-theme="dark"] .messages{background:#161226} html[data-theme="dark"] .day{background:var(--card);color:var(--muted);box-shadow:none} html[data-theme="dark"] .bubble{box-shadow:0 1px 2px rgba(0,0,0,.35)} html[data-theme="dark"] .msg-menu-toggle:hover{background:rgba(255,255,255,.14)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .messages{background:#161226} html:not([data-theme="light"]) .day{background:var(--card);color:var(--muted);box-shadow:none} html:not([data-theme="light"]) .bubble{box-shadow:0 1px 2px rgba(0,0,0,.35)} } /* ---- chat voice notes ---- */ html[data-theme="dark"] .received .voice-note{background:rgba(255,255,255,.08)} html[data-theme="dark"] .received .voice-len{color:var(--ink)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .received .voice-note{background:rgba(255,255,255,.08)} html:not([data-theme="light"]) .received .voice-len{color:var(--ink)} } /* ---- post & sponsored cards ---- */ html[data-theme="dark"] .sponsored-label,html[data-theme="dark"] .post-flag{background:#241f3d;color:var(--violet)} html[data-theme="dark"] .post-flag.warn{background:#33280f;color:#e8c979} html[data-theme="dark"] .ad-chip{background:#2e2748;color:var(--violet)} html[data-theme="dark"] .ad-cta{background:linear-gradient(135deg,#2c2350,#3a2140);color:var(--violet)} html[data-theme="dark"] .ad-cta:hover{background:linear-gradient(135deg,#352a5f,#48284f)} html[data-theme="dark"] .post-actions button:hover,html[data-theme="dark"] .post-actions button.liked, html[data-theme="dark"] .reaction-main:hover,html[data-theme="dark"] .reaction-main.is-active{background:#2a2440;color:var(--violet)} html[data-theme="dark"] .sponsored-card{border-color:#3b3163;box-shadow:0 10px 30px rgba(0,0,0,.35)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .sponsored-label,html:not([data-theme="light"]) .post-flag{background:#241f3d;color:var(--violet)} html:not([data-theme="light"]) .post-flag.warn{background:#33280f;color:#e8c979} html:not([data-theme="light"]) .ad-chip{background:#2e2748;color:var(--violet)} html:not([data-theme="light"]) .ad-cta{background:linear-gradient(135deg,#2c2350,#3a2140);color:var(--violet)} html:not([data-theme="light"]) .ad-cta:hover{background:linear-gradient(135deg,#352a5f,#48284f)} html:not([data-theme="light"]) .post-actions button:hover,html:not([data-theme="light"]) .post-actions button.liked, html:not([data-theme="light"]) .reaction-main:hover,html:not([data-theme="light"]) .reaction-main.is-active{background:#2a2440;color:var(--violet)} html:not([data-theme="light"]) .sponsored-card{border-color:#3b3163;box-shadow:0 10px 30px rgba(0,0,0,.35)} } .save-btn:hover,.more:hover{background:var(--soft)} /* ---- home dashboard rails ---- */ .feature-strip{background:var(--card);border-color:var(--line)} html[data-theme="dark"] .encourage{background:linear-gradient(140deg,#241f3d,#2b2142)} html[data-theme="dark"] .encourage-art{background:var(--card)} html[data-theme="dark"] .soft-btn{background:#2e2748;color:var(--violet)} html[data-theme="dark"] .soft-btn:hover{background:#372e56} html[data-theme="dark"] .earn-ico.ads{background:#1e2b46;color:var(--blue)} html[data-theme="dark"] .earn-ico.promo{background:#3a2036;color:var(--pink)} html[data-theme="dark"] .earn-ico.total{background:#1c3a30;color:var(--green)} html[data-theme="dark"] .campaign-thumb,html[data-theme="dark"] .strip-ico{background:#2e2748;color:var(--violet)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .encourage{background:linear-gradient(140deg,#241f3d,#2b2142)} html:not([data-theme="light"]) .encourage-art{background:var(--card)} html:not([data-theme="light"]) .soft-btn{background:#2e2748;color:var(--violet)} html:not([data-theme="light"]) .soft-btn:hover{background:#372e56} html:not([data-theme="light"]) .earn-ico.ads{background:#1e2b46;color:var(--blue)} html:not([data-theme="light"]) .earn-ico.promo{background:#3a2036;color:var(--pink)} html:not([data-theme="light"]) .earn-ico.total{background:#1c3a30;color:var(--green)} html:not([data-theme="light"]) .campaign-thumb,html:not([data-theme="light"]) .strip-ico{background:#2e2748;color:var(--violet)} } /* The two gradient cards keep their own colour in both themes. */ .strip-ico.brand{background:var(--brand-grad);color:#fff} /* The wallet card carries its own gradient in both themes, so it only needs its border neutralised. The campaign card's tint is a light-theme colour, so dark swaps it for a tinted dark surface rather than losing the distinction. */ .wallet-widget{border-color:transparent} html[data-theme="dark"] .campaign-widget{background:linear-gradient(145deg,#2a2140,#241f3d);border-color:var(--line)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .campaign-widget{background:linear-gradient(145deg,#2a2140,#241f3d);border-color:var(--line)} } /* ---- shell surfaces added in the sidebar/topbar refresh ---- */ /* :not() keeps the promoter card's gradient, which must survive both themes. */ .mode-card:not(.promoter-card),.quick-card{background:var(--card);border-color:var(--line)} .dot-badge{border-color:var(--card)} .icon-button:hover,.search-go:hover{background:var(--soft)} html[data-theme="dark"] .switch{background:#3a3450} html[data-theme="dark"] .switch span{color:var(--muted)} html[data-theme="dark"] .switch i{background:#e7e3f5} html[data-theme="dark"] .switch.on i{background:#fff} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .switch{background:#3a3450} html:not([data-theme="light"]) .switch span{color:var(--muted)} html:not([data-theme="light"]) .switch i{background:#e7e3f5} html:not([data-theme="light"]) .switch.on i{background:#fff} } /* The switch itself */ .theme-toggle{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent; padding:11px 12px;border-radius:11px;font-size:13px;font-weight:600;color:#555a70;min-height:44px} html[data-theme="dark"] .theme-toggle{color:var(--ink)} .theme-toggle:hover{background:var(--soft);color:var(--purple)} .theme-toggle .track{margin-left:auto;width:38px;height:21px;border-radius:20px;background:var(--line);position:relative;transition:.2s} .theme-toggle .track i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)} html[data-theme="dark"] .theme-toggle .track{background:var(--purple)} html[data-theme="dark"] .theme-toggle .track i{transform:translateX(17px)}