/* ============================================================ page-themes.css —— 独立页的主题色板每个独立页可以有自己的主题色，由页面内容决定：讲设计的用品红，讲演讲的用橙，讲学习的用青。页面之间不同色，页面内部只有一色。这跟仓库里出过的「单页 13 个色相」不是一回事：那是页面内部的混乱——每个小标题配一个不同颜色的图标块，颜色不承载任何信息。页面之间各有主题色，反而让不同主题的页面有辨识度。 ── 为什么必须从这里选，不能在页面里写内联 style ────────── 主题色不是一个值，是一组：主色、加深版（hover / 次级文字）、淡色底（标签、胶囊、强调卡片），外加压在实底上的文字色。手写必然漏，对比度也守不住。这里每个色都验证过两项： ink 压白底 ≥4.5:1 （主色当文字用：标签、链接、eyebrow）白字压 ink ≥4.5:1 （hero 实底上的标题与正文）实测值见每个主题的注释。改色或加色后重新验证，别凭色号猜。 ── 用法 ──────────────────────────────────────────── accent-soft 由 color-mix 从主色推导，不逐个手写，改主色时自动跟随。 ============================================================ */ [class*="page-theme-"] { --page-accent-soft: color-mix(in srgb, var(--page-accent) 9%, transparent); } /* 紫 H257 —— 知识库「精选网页」栏目色。不指定主题时的默认值，与 /pages/ 落地页一致。ink 6.27:1 / 白字 6.27:1 */ .page-theme-violet { --page-accent: #6b45cc; --page-accent-strong: #5836aa; } /* 靛 H226 —— 站点品牌色。适合工具、结构、系统类主题。 ink 7.08:1 / 白字 7.08:1 */ .page-theme-indigo { --page-accent: #3451b2; --page-accent-strong: #2a4193; } /* 蓝绿 H175 —— 知识库「学习笔记」栏目色。ink 5.47:1 / 白字 5.47:1 */ .page-theme-teal { --page-accent: #0f766e; --page-accent-strong: #0c5d57; } /* 青 H195 —— 冷静、偏理性，适合方法与研究类主题。 ink 5.36:1 / 白字 5.36:1 */ .page-theme-cyan { --page-accent: #0e7490; --page-accent-strong: #0b5c73; } /* 金 H42 —— 知识库「参考资料」栏目色。ink 4.93:1 / 白字 4.93:1 余量最小的一档，用在小字上要留意。 */ .page-theme-gold { --page-accent: #936906; --page-accent-strong: #785405; } /* 橙 H25 —— 外向、有能量，适合表达与演示类主题。 ink 5.18:1 / 白字 5.18:1 */ .page-theme-orange { --page-accent: #c2410c; --page-accent-strong: #9a340a; } /* 玫红 H350 —— ink 6.29:1 / 白字 6.29:1 与「已失效」的语义红（#b3261e）色相接近，页面若大量使用判定色，改选品红或紫，免得读者把主题色误读成状态。 */ .page-theme-rose { --page-accent: #be123c; --page-accent-strong: #9f0f32; } /* 品红 H322 —— 创意、设计类主题。色相盘上离四个栏目色都最远，页面内若有大量色彩演示，它最不容易和演示色混淆。 ink 6.32:1 / 白字 6.32:1 */ .page-theme-magenta { --page-accent: #a21caf; --page-accent-strong: #86198f; } /* 石板灰 H215 —— 主题色退场。内容本身色彩很重（大量图表、色板、截图）时用它，避免主题色和内容抢。ink 7.58:1 / 白字 7.58:1 */ .page-theme-slate { --page-accent: #475569; --page-accent-strong: #334155; }