/* * ── Dark theme overrides ─────────────────────────────────────────────────────── * * Applied when is set. * Light theme is the default, defined entirely in styles.css. * * HOW THIS FILE WORKS * ─────────────────── * 1. The [data-theme="dark"] block below overrides every CSS variable whose * dark value differs from the light default declared in styles.css :root. * Prefer this path for any new colour — add a var to :root in styles.css, * use it in the rule, then add the dark value here. * * 2. Per-element [data-theme="dark"] rules further down handle the small set * of values that genuinely cannot be a single variable: * - multi-stop gradients (model-card, chart-card backgrounds) * - box-shadows whose opacity flips (dark cards need heavier shadow) * - badge colour palettes (neon tints in dark vs muted in light) * - the header "blue band" (different hue + alpha in each theme) * * MAINTENANCE CHECKLIST — when adding new styles to styles.css: * ✅ Used a CSS var? → Add its dark value to [data-theme="dark"] :root below. * ❌ Hardcoded a colour? → Move it to a var first (see above), then add dark * value here. Only skip this if the value is truly theme-invariant (e.g. * a structural constant like border-radius or padding). * ───────────────────────────────────────────────────────────────────────────── */ /* ── 1. Variable overrides — cover the vast majority of the dark theme ── */ [data-theme="dark"] { /* Base palette */ --color-win: #22c55e; --color-loss: #ef4444; --color-amber: #f59e0b; --color-neutral: #6b7280; --color-accent: #6b7aff; --color-accent-hover: #8b96ff; --color-live: #22c55e; --color-card-bg: #131820; --color-card-bg-2: #0f141c; --color-page-bg: #0b0f14; --color-border: rgba(255,255,255,.07); --color-text-1: #e8eeff; --color-text-2: #7a87aa; --color-text-3: #3d4660; /* Semantic */ --color-blue: #60a5fa; --color-purple: #a78bfa; --color-orange: #fb923c; /* Confidence scale */ --color-conf-high: #39ff14; --color-conf-mid: #f59e0b; --color-conf-low: #ef4444; /* Glows */ --glow-win: 0 0 12px rgba(34,197,94,.35); --glow-loss: 0 0 12px rgba(239,68,68,.35); --glow-accent: 0 0 16px rgba(107,122,255,.3); /* Structural surfaces */ --color-topbar-bg: #0d1117; --color-topbar-border: rgba(255,255,255,.06); --color-surface: rgba(255,255,255,.04); --color-surface-2: rgba(255,255,255,.08); --color-surface-border: rgba(255,255,255,.06); --color-input-bg: rgba(255,255,255,.05); --color-input-border: rgba(255,255,255,.1); --color-disabled-bg: rgba(255,255,255,.1); --color-disabled-fg: rgba(255,255,255,.3); --color-muted-action: rgba(255,255,255,.2); --color-live-dot-glow: rgba(74,222,128,.35); /* live-dot pulse ring (dark) */ --color-accent-glow: rgba(107,122,255,.5); /* dot-glow pulse ring (dark) */ } /* ── 2. Per-element overrides — only for values that can't be a single var ── */ /* Card backgrounds + shadows (gradient stops and shadow opacity both change) */ [data-theme="dark"] .model-card { background: linear-gradient(160deg, #161d2a 0%, #111620 100%); box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="dark"] .model-card.active { box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(107,122,255,.15), inset 0 1px 0 rgba(255,255,255,.07); } [data-theme="dark"] .chart-card { background: linear-gradient(160deg, #161d2a 0%, #111620 100%); box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); } /* Disclosure bar — match the dark card-header-top treatment */ [data-theme="dark"] .card-disclose-bar { background: rgba(30,58,138,.55); } /* Header "blue band" (hue + alpha shift between themes) */ [data-theme="dark"] .card-header-top { background: rgba(30,58,138,.4); border-bottom: 1px solid rgba(96,165,250,.15); } /* Hover states — must match the blue band colours above */ @media (hover: hover) { [data-theme="dark"] .chart-header:hover { background: rgba(255,255,255,.03); } [data-theme="dark"] .chart-header:hover .card-header-top { background: rgba(30,58,138,.5); } } /* Source chart/conversation buttons — deep indigo in dark mode, not the electric accent */ [data-theme="dark"] .chart-image-meta { border-bottom-color: var(--color-card-bg); background: var(--color-card-bg); } [data-theme="dark"] .chart-image-link + .chart-image-link { border-left-color: var(--color-card-bg); } [data-theme="dark"] .chart-image-link { background: #312e81; color: #c7d2fe; } [data-theme="dark"] .chart-image-link:hover { background: #3730a3; color: #e0e7ff; } /* Provider section legibility — text-3 (#3d4660) is too dark on dark card backgrounds */ [data-theme="dark"] .card-iter-sublabel { color: var(--color-text-2); } [data-theme="dark"] .card-iter-arrow { color: var(--color-text-2); } [data-theme="dark"] .card-iter-initial { color: var(--color-text-1); } [data-theme="dark"] .card-provider-prices { color: var(--color-text-1); } [data-theme="dark"] .price-label { color: var(--color-text-2); } /* "None" win-rate: white/15% in dark vs black/20% in light */ [data-theme="dark"] .model-card-winrate.none { color: rgba(255,255,255,.15); } [data-theme="dark"] .win-rate.none { color: rgba(255,255,255,.15); } /* Badge colour palettes (neon in dark, muted in light) */ [data-theme="dark"] .resolution-badge.WIN { background: rgba(34,197,94,.15); color: #4ade80; } [data-theme="dark"] .resolution-badge.LOSS { background: rgba(239,68,68,.15); color: #f87171; } [data-theme="dark"] .resolution-badge.PARTIAL { background: rgba(245,158,11,.15); color: #fbbf24; } [data-theme="dark"] .resolution-badge.UNCLEAR, [data-theme="dark"] .resolution-badge.pending { background: rgba(255,255,255,.06); color: var(--color-text-2); } [data-theme="dark"] .card-outcome-badge.WIN { background: rgba(34,197,94,.15); color: #4ade80; } [data-theme="dark"] .card-outcome-badge.LOSS { background: rgba(239,68,68,.15); color: #f87171; } [data-theme="dark"] .card-outcome-badge.PARTIAL { background: rgba(245,158,11,.15); color: #fbbf24; } [data-theme="dark"] .card-outcome-badge.UNCLEAR, [data-theme="dark"] .card-outcome-badge.pending { background: rgba(255,255,255,.06); color: var(--color-text-2); } [data-theme="dark"] .confluence-badge.confluence { background: rgba(34,197,94,.15); color: #4ade80; } [data-theme="dark"] .confluence-badge.split { background: rgba(251,146,60,.15); color: var(--color-orange); } [data-theme="dark"] .signal-badge.signal-strong_buy { background: rgba(34,197,94,.15); color: #4ade80; } [data-theme="dark"] .signal-badge.signal-weak_buy { background: rgba(34,197,94,.09); color: #86efac; } [data-theme="dark"] .signal-badge.signal-contested { background: rgba(239,68,68,.15); color: #f87171; } [data-theme="dark"] .signal-badge.signal-no_trade { background: rgba(255,255,255,.06); color: var(--color-text-2); } [data-theme="dark"] .signal-badge.signal-solo { background: rgba(245,158,11,.15); color: #fbbf24; } [data-theme="dark"] .revised-chip { background: rgba(167,139,250,.15); color: var(--color-purple); } [data-theme="dark"] .affirmed-chip { background: rgba(255,255,255,.07); color: var(--color-text-2); } [data-theme="dark"] .card-resolution-strip.WIN { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.2); } [data-theme="dark"] .card-resolution-strip.LOSS { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.2); } [data-theme="dark"] .card-resolution-strip.PARTIAL { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.2); } [data-theme="dark"] .card-resolution-strip.UNCLEAR { background: rgba(255,255,255,.04); color: var(--color-text-2); } /* Bar track contrast (dark cards need a lighter track to show against dark bg) */ [data-theme="dark"] .card-provider-bar { background: rgba(255,255,255,.12); } /* Pending shimmer gradient (dark uses white tint, light uses black tint) */ [data-theme="dark"] .card-progress-fill.pending { background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(107,122,255,.2) 50%, rgba(255,255,255,.06) 75%); background-size: 200% 100%; } /* Delete button hover (bg opacity differs per theme) */ [data-theme="dark"] .delete-btn:hover { color: var(--color-loss); background: rgba(239,68,68,.12); } /* Upload modal backdrop (heavier in dark) */ [data-theme="dark"] #upload-modal { background: rgba(0,0,0,.75); } /* ── Theme toggle button (theme-invariant, lives here to avoid polluting styles.css) ── */ #theme-toggle { background: none; border: none; cursor: pointer; padding: .2rem; color: var(--color-text-1); opacity: .5; transition: opacity .15s; line-height: 0; margin-right: .35rem; } #theme-toggle svg { width: 1.25rem; height: 1.25rem; display: block; pointer-events: none; } #theme-toggle:hover { opacity: 1; } #theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; opacity: 1; } /* Default (light): show moon; dark: show sun */ #theme-toggle .icon-sun { display: none; } #theme-toggle .icon-moon { display: block; } [data-theme="dark"] #theme-toggle .icon-sun { display: block; } [data-theme="dark"] #theme-toggle .icon-moon { display: none; }