/* ========================================================================== 配色方案 -------------------------------------------------------------------------- 和 style.css 里的「版式覆写」是同一套机制的第二个入口：一套方案 = 一组令牌值，挂在上。由 inc/customize.php（AISH_Customize::body_class）按后台的选择加类名。 ⚠ 加类名的那一侧做的是**白名单校验**，不是拼字符串。这个文件里出现过的后缀才可能被输出；后台存了个脏值也不会变成 body 上的任意类名。 ───────────────────────────────────────────────────────────────────── 为什么选择器是 body.aish-scheme-x 而不是 .aish-scheme-x ───────────────────────────────────────────────────────────────────── .layout-blog 那类版式覆写的权重是 (0,1,0)，和单个类选择器**相等**，谁生效完全取决于谁在文件里靠后。那是"动一下加载顺序就变天"的约定，而加载顺序被 enqueue 的依赖数组管着，改它的时候没人会想到配色。 body.aish-scheme-x 是 (0,1,1)，稳定压过版式层，与文件顺序无关。 ───────────────────────────────────────────────────────────────────── 方案只动「面 / 墨 / 强调」，不动「形」 ───────────────────────────────────────────────────────────────────── --shell / --read-measure / --gap-* / --radius 是版式的语言，换配色不该顺带把版式也换掉——那些令牌留在各版式自己的作用域里。 ───────────────────────────────────────────────────────────────────── 每一档的对比度都是量出来的，不是估的 ───────────────────────────────────────────────────────────────────── 规则和 style.css 一致：正文级文字 ≥ 4.5:1（WCAG AA）， --ink-3 这种次要信息在它所在的**最浅的那个底**上也要过 4.5。工具在 _preview/colors.html：那一页直接读本文件的 CSSOM，自己算对比度，哪一档不达标就把那张色卡标红。改这里的任何一个色值之后，去那一页看一眼再提交。下面这一版实测的原始数字。写下来是为了让"改之前是多少"可查，不是用来替代那一页——色值动过之后这里就可能过期：底色 ink-3/页面底 ink-3/卡片面 ink-3/次级面纯白 5.05 5.05 4.70 浅灰 4.58 5.43 4.96 暖白 5.99 6.53 5.69 深色 6.80 6.25 5.66 --ink 和 --ink-2 余量很大，不逐个记：实测最低的一格是暖白的 ink-2/次级面 6.53，离门槛还有 2 个点。真正贴着线走的只有 ink-3 这一列，所以盯它就够了。强调色 dk/浅底白字/accent accent/白底朱红 5.04 4.33 ✗ 4.33 ✗ 橙 5.59 4.67 4.67 墨蓝 13.13 11.57 11.57 青 7.25 6.38 6.38 紫 8.34 7.72 7.72 ⚠ 朱红那一行两个 ✗ 是**已知并保留**的取舍，不是漏改：它是品牌色 #de3f27，白字压它、它压在白底上，都只有 4.33:1，够不上 AA 的 4.5。要过就得把它压深半档，那就不再是原来那个色了。所以这里给的是"多选"——要合规就选橙（4.67）或更深的几档；选朱红，等于接受这两个位置停在 4.33。 ⚠ --accent 还有第三个用法：**当普通文字色**（全局 a:hover、面包屑 hover、导航当前项、翻页 hover、侧栏链接 hover……）。那个位置的底是页面底，不是白面，所以要求又不一样：橙压在博客那个浅灰底上只有 3.94:1，朱红 3.65:1。浅色方案里这一条目前是**已知未修**，详见 _preview/colors.html 里标红的那几行——修它要动全站十几处 color: var(--accent)，属于约定层面的改动，留待确认。 ⚠ 深色方案是最不成熟的一档。全站组件都是按浅底画的，令牌虽然全，但图片白边、投影、第三方嵌入这些不受令牌控制的地方在深底上会露出来。选它之前先整体翻一遍。 ========================================================================== */ /* -------------------------------------------------------------------------- 一、底色方案（面 + 墨 + 线，成套给） -------------------------------------------------------------------------- */ /* —— 纯白 —— */ body.aish-scheme-white { --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f7f8; --ink: #1b2634; --ink-2: #5c6878; /* 必须和 :root 那个值保持一致。这里是显式重写，不是继承——所以 :root 调深之后这里不会跟着动，漏改一处就会留下一档"看着是同一个白底、实际比别处浅一档"的墨。上一版就是这么漏的：#6b7280 压 --surface-2 只有 4.499:1。 */ --ink-3: #696f7a; --line: #e4e8ee; --line-2: #d3dadf; } /* —— 浅灰 —— 博客版式原本就是这一套。选中它 = 把博客的底色推广到全站。 */ body.aish-scheme-mist { --bg: #e9ecee; --surface: #ffffff; --surface-2: #f2f5f6; --ink: #13212c; --ink-2: #41525f; /* 必须比 :root 那一档深，不能继承： :root 的 #696f7a 压在 #e9ecee 上只有 4.21:1，而这一档方案的页面底就是 #e9ecee，站头副标题、时间戳、面包屑全在这一层上。用同一档墨色套所有浅底，是这里最容易犯的错—— 在纯白底上量着合格，换成灰底就整体掉下去。 #5f6b79：页面底 4.58:1，白面 5.43:1，--surface-2 4.96:1。（.layout-blog 的页面底和这里一样，它自己也挑了一个值，见 style.css；两处不必相同，但都必须过自己那个底。） */ --ink-3: #5f6b79; --line: #e2e6e8; --line-2: #d3dadf; } /* —— 暖白 —— */ body.aish-scheme-warm { --bg: #f7f5f0; --surface: #ffffff; --surface-2: #f2efe8; --ink: #1f1c17; /* 偏暖的次级墨。这套方案的线和面都不带蓝，用 :root 那个偏蓝的 #5c6878 会在一页里混出两种灰，看得出来。 */ --ink-2: #5a5449; --ink-3: #635d51; --line: #e9e5dc; --line-2: #d8d3c8; } /* —— 深色 —— 整套反转，不是只把 --bg 调黑。只改 --bg 的话墨色还是深的，结果是深灰底压深灰字——页面能打开，但几乎读不了。 */ body.aish-scheme-ink { color-scheme: dark; --bg: #14181d; --surface: #1b2027; --surface-2: #222831; --ink: #eef1f4; --ink-2: #b6bfc9; --ink-3: #97a1ac; --line: #2a313a; --line-2: #3a434e; /* —— 实底上的字色，必须跟着翻面 —— 这是深色方案最容易漏的一处，漏了也不会有人报：全站九个地方（搜索按钮、主按钮、当前页码、阅读页的页码和标签 hover、评论提交、分类徽标）都是「--accent 当底 + 白字」。深色方案里 --accent 已经换成了浅色（下面那组），白字压上去只剩 1.8～2.6:1——按钮上的字几乎看不见，而那恰好是全站点击率最高的那几个元素。浅色方案里这个值是白，深色方案里必须是深色。所以那九处写的都是 var(--on-accent)，不是 #fff。 */ --on-accent: #14181d; /* —— 强调色也必须有默认值 —— 后台那两个下拉框是**独立**的：完全可以只把底色选成深色，强调色留在「跟随版式默认」。那时候 body 上只有 aish-scheme-ink，下面那组 .aish-scheme-ink.aish-accent-x 一条都不命中， --accent / --accent-soft 就照旧继承 :root 或版式那一套，也就是**浅底专用的那套**。后果不是"配色不搭"，是一块浅粉底（--accent-soft #fdeeeb）压在深色页面上，而这套方案的 --ink 是浅色的：两者对比度 1.00:1，落在上面的字直接消失。而 ::selection、.aib-badge、.read-tags 都用这一对。所以这里补上自带的默认三件套——就是朱红那一档的深色变体，和 body.aish-scheme-ink.aish-accent-vermilion 逐字相同：单独选"深色"等于"深色 + 品牌色"。 */ --accent: #ff7a63; --accent-dk: #ff9a86; --accent-soft: #3a2019; /* 投影也要换。默认那两条是 rgba(27,38,52,…)——深底上的深投影等于没有投影，浮层会看起来"糊"在页面上。 */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px -6px rgba(0, 0, 0, .6); --shadow-2: 0 2px 4px rgba(0, 0, 0, .55), 0 14px 32px -12px rgba(0, 0, 0, .7); } /* -------------------------------------------------------------------------- 二、强调色 -------------------------------------------------------------------------- 三件套必须一起给： --accent 实底、白字压它、也当链接色 --accent-dk hover / 按下 --accent-soft 浅色底（选中态、标签底）只给 --accent 的话，hover 和浅底会停在默认那一套色上—— 鼠标一悬停颜色就跳到另一个色系，看起来像样式坏了。 -------------------------------------------------------------------------- */ body.aish-accent-vermilion { --accent: #de3f27; --accent-dk: #bf3220; --accent-soft: #fdeeeb; } body.aish-accent-orange { --accent: #c94b06; --accent-dk: #a83c04; --accent-soft: #fdeee4; } body.aish-accent-navy { --accent: #1e3a5c; --accent-dk: #16293f; --accent-soft: #eef2f7; } body.aish-accent-teal { --accent: #0b6b62; --accent-dk: #08584f; --accent-soft: #e4f2f0; } body.aish-accent-violet { --accent: #5b3fa8; --accent-dk: #4a3390; --accent-soft: #f0ecfa; } /* —— 深色底上的强调色 —— 上面那组是按浅底选的：深到能在白底上压得住 4.5:1。深底上要求正好相反——要**浅**，否则深蓝压深灰底直接看不见。同一个色值不可能两头都满足，所以这里另给一组。只有「深色底 + 某个强调色」同时选中时才会命中，两条类选择器叠起来权重 (0,2,1)，压过上面单独那一层。 */ body.aish-scheme-ink.aish-accent-vermilion { --accent: #ff7a63; --accent-dk: #ff9a86; --accent-soft: #3a2019; } body.aish-scheme-ink.aish-accent-orange { --accent: #ff9a4d; --accent-dk: #ffb37a; --accent-soft: #3a2413; } body.aish-scheme-ink.aish-accent-navy { --accent: #8fb8e8; --accent-dk: #aacbf0; --accent-soft: #1b2637; } body.aish-scheme-ink.aish-accent-teal { --accent: #5fd3c6; --accent-dk: #86e0d6; --accent-soft: #16302e; } body.aish-scheme-ink.aish-accent-violet { --accent: #b9a3f0; --accent-dk: #cdbcf6; --accent-soft: #261f3d; }