/* 深色主题 + 外观切换控件。浅色一律走 style.css,这里除了「外观」那一行的控件样式,全挂在 :root[data-theme="dark"] 下。 * data-theme 由 index.html 内联脚本在样式表之前设好,切换逻辑见 assets/theme.js。 * 规则:token 在 :root 重定义;style.css 里写死的颜色逐个选择器盖掉(选择器前缀 [data-theme=dark] 保证优先级更高)。 * 学科色(--theme / --theme-soft)是 app.js 内联写的,换算在 theme.js,这里不管。 */ /* ---------- 设置抽屉「外观」一行(浅色 / 深色都用) ---------- */ .theme-row{align-items:center;gap:10px;margin-top:16px;flex-wrap:nowrap} .theme-lbl{flex:0 0 auto;font-size:14.5px;font-weight:650;color:var(--ink)} .theme-seg{flex:1 1 auto;display:flex;background:var(--line2);border-radius:11px;padding:3px;gap:2px} .theme-seg button{flex:1 1 0;border:0;background:transparent;color:var(--ink2);font:inherit;font-size:13.5px; padding:6px 4px;border-radius:9px;cursor:pointer;white-space:nowrap} .theme-seg button.on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--shadow)} :root[data-theme="dark"] .theme-seg{background:var(--bg)} :root[data-theme="dark"] .theme-seg button.on{background:#394155} /* ---------- token ---------- */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#151922; --card:#1e2330; --ink:#e8ebf2; /* 卡片上 13.2:1,底上 14.7:1 */ --ink2:#b3bacb; /* 卡片上 8.1:1 */ --ink3:#8f98ac; /* 卡片上 5.4:1,--line2 上 4.7:1 */ --muted:#8f98ac; --line:#343b4b; --line2:#282e3b; --field:#181c26; /* 输入框底:比卡片略深 */ --blue:#5a8de6; --blue-soft:#1b2640; --green:#2da171; --green-soft:#16302a; --orange:#df8d3f; --orange-soft:#342a1c; --red:#d86f67; --red-soft:#3a2023; --purple:#9d7edb; --purple-soft:#2a2340; --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-lg:0 10px 30px rgba(0,0,0,.5); --theme:#5a8de6; --theme-soft:#1b2640; scrollbar-color:#3d4556 var(--bg); } /* 下面一律写成「:where([data-theme="dark"]) + style.css 里的原选择器」: :where() 不计特异度,所以和原规则同级、靠加载顺序(本文件在 style.css 之后)胜出, 原来更具体的状态规则(.opt.right、.cq-slot.bad .cq-in …)照样盖得住这里 —— 对错色不会被吃掉。 */ :where([data-theme="dark"]) #app{--gd-paper:#1f232d;--gd-paper-line:#3a4050;--gd-paper-ink:#e2e5ec; --gd-gap:#3b3217;--gd-gap-ink:#f2c55c;--gd-good:#16302a;--gd-bad:#3a2023} :where([data-theme="dark"]) ::-webkit-scrollbar{width:10px;height:10px;background:var(--bg)} :where([data-theme="dark"]) ::-webkit-scrollbar-thumb{background:#3d4556;border-radius:10px;border:2px solid var(--bg)} :where([data-theme="dark"]) ::selection{background:rgba(90,141,230,.45)} :where([data-theme="dark"]) :where(input,textarea)::placeholder{color:#737c90} /* ---------- 顶栏 / 抽屉 / 通用控件 ---------- */ :where([data-theme="dark"]) #topbar{background:rgba(21,25,34,.94)} :where([data-theme="dark"]) .topnav a.on, :where([data-theme="dark"]) .iconbtn, :where([data-theme="dark"]) .btn.ghost, :where([data-theme="dark"]) .btn.grey, :where([data-theme="dark"]) .subtab, :where([data-theme="dark"]) .sheet-card, :where([data-theme="dark"]) .profile-btn{background:var(--card)} :where([data-theme="dark"]) .sheet{background:rgba(0,0,0,.6)} :where([data-theme="dark"]) .profile-btn.on{background:var(--purple-soft)} :where([data-theme="dark"]) .floatpt{text-shadow:0 2px 8px rgba(0,0,0,.7)} :where([data-theme="dark"]) .floatpt.hot{text-shadow:0 0 14px rgba(240,185,58,.6),0 2px 8px rgba(0,0,0,.7)} /* ---------- 首页 / 境界 ---------- */ :where([data-theme="dark"]) .hero{background:linear-gradient(160deg,#3e6fcf,#6448c2)} :where([data-theme="dark"]) .task-go{background:linear-gradient(100deg,#3e6fcf,#6448c2);box-shadow:0 6px 18px rgba(0,0,0,.35)} :where([data-theme="dark"]) .study-top .qbar i{background:linear-gradient(90deg,#3e6fcf,#6448c2)} :where([data-theme="dark"]) .bottleneck-tag.dark, :where([data-theme="dark"]) .gaterow.dark, :where([data-theme="dark"]) .stage.passed, :where([data-theme="dark"]) .opt.picked, :where([data-theme="dark"]) .es-cat-coherence{background:var(--purple-soft)} @keyframes hlflash-dark{50%{background:#4a3a1c}} :where([data-theme="dark"]) .dark-list.hl .gaterow.dark{animation-name:hlflash-dark} :where([data-theme="dark"]) .vstrip-track{background:rgba(255,255,255,.14)} :where([data-theme="dark"]) .quickbar.book{background:var(--orange-soft);color:var(--orange)} :where([data-theme="dark"]) .mainline-tag{background:rgba(0,0,0,.3)} /* app.js 把「主攻」小标签的底色 / 字色直接写成了内联的亮色学科色 */ :where([data-theme="dark"]) .vocab-card .dao-badge{background:var(--theme-soft) !important;color:var(--theme) !important} /* 进度环的底圈是 SVG 属性 stroke="#eef1f7",CSS 属性能盖过 SVG 表现属性 */ :where([data-theme="dark"]) .ring circle:first-child{stroke:var(--line2)} /* ---------- 刷题 ---------- */ :where([data-theme="dark"]) .opt, :where([data-theme="dark"]) .task-bopt{background:var(--card)} :where([data-theme="dark"]) .fill-row input, :where([data-theme="dark"]) .io-box{background:var(--field)} /* ---------- 计划卡 / 任务 ---------- */ :where([data-theme="dark"]) .ptask-ck, :where([data-theme="dark"]) .plan-arrow, :where([data-theme="dark"]) .task-qopt, :where([data-theme="dark"]) .task-qstep, :where([data-theme="dark"]) .dr-clear{background:var(--card)} :where([data-theme="dark"]) .pov-dot.part{background:linear-gradient(90deg,var(--green) 50%,var(--card) 50%)} /* ---------- 写作 / 作文 ---------- */ :where([data-theme="dark"]) .wr-mini{background:var(--card)} :where([data-theme="dark"]) .wr-prompt-input, :where([data-theme="dark"]) .wr-body{background:var(--field)} :where([data-theme="dark"]) .es-cat-task, :where([data-theme="dark"]) .es-kind.t2, :where([data-theme="dark"]) .jn-kind{color:var(--orange)} :where([data-theme="dark"]) .es-trend-dot{fill:var(--card)} /* ---------- 听写 / 外刊 / 剑桥 ---------- */ :where([data-theme="dark"]) .ls-pl-btn, :where([data-theme="dark"]) .ls-pl-rate, :where([data-theme="dark"]) .rd-loop, :where([data-theme="dark"]) .rd-opt, :where([data-theme="dark"]) .cam-chip, :where([data-theme="dark"]) .cam-part, :where([data-theme="dark"]) .cam-timer-b, :where([data-theme="dark"]) .cq-opt, :where([data-theme="dark"]) .cq-sent, :where([data-theme="dark"]) .cr-tab{background:var(--card)} :where([data-theme="dark"]) .rd-pop{background:var(--card);border:1px solid var(--line)} :where([data-theme="dark"]) .ls-in, :where([data-theme="dark"]) .cq-in, :where([data-theme="dark"]) .cq-sel{background:var(--field)} :where([data-theme="dark"]) .cr-bar{background:rgba(21,25,34,.96)} /* ---------- 复盘库 / 日历 ---------- */ /* 报告在 sandbox iframe 里、自带 prefers-color-scheme;iframe 里的「系统偏好」取的是 iframe 元素的 color-scheme, 所以显式给它定成站点当前主题,报告就跟着站点走(浅色时也定成 light,别让系统深色把报告单独染黑) */ :where([data-theme="dark"]) .jn-frame{background:var(--card);color-scheme:dark} :where([data-theme="light"]) .jn-frame{color-scheme:light} :where([data-theme="dark"]) .jn-check, :where([data-theme="dark"]) .cal-arrow, :where([data-theme="dark"]) .cal-draft{background:var(--card)} :where([data-theme="dark"]) .cal-cell.l1,:where([data-theme="dark"]) .cal-sw.l1{background:#1b3439} :where([data-theme="dark"]) .cal-cell.l2,:where([data-theme="dark"]) .cal-sw.l2{background:#1f5058} :where([data-theme="dark"]) .cal-cell.l3,:where([data-theme="dark"]) .cal-sw.l3{background:#27808d} :where([data-theme="dark"]) .cal-cell.l4,:where([data-theme="dark"]) .cal-sw.l4{background:#3fb0c0} :where([data-theme="dark"]) .cal-cell.l4 .cal-d{color:#0e1b1e} :where([data-theme="dark"]) .cal-ring-bg{fill:var(--card);stroke:rgba(255,255,255,.22)} :where([data-theme="dark"]) .cal-ring-fill{stroke:var(--card)} /* ---------- 多语种单词卡 ---------- */ :where([data-theme="dark"]) .vgender.g-m{background:#1c2a40;color:#8fb4ec} :where([data-theme="dark"]) .vgender.g-f{background:#3a1f2b;color:#ec94b5} :where([data-theme="dark"]) .vgender.g-n{background:#253024;color:#a9bd98} /* ---------- 题型图鉴 ---------- */ :where([data-theme="dark"]) .gd-svg .f-part{fill:#5d6577} :where([data-theme="dark"]) .gd-svg .f-pipe{fill:#6b7385}