皮肤对照 同一份 HTML · 同一套布局 · 只换配色｜ 2 套皮肤｜切换只改 html[data-skin]，不动任何 DOM

两套皮肤对照：默认深色底 vs 暖纸底

改的不是配色方案，是使用场景：深色底适合晚上开电脑那段（70 分钟）；暖纸底适合白天手机上看（53 分钟），在户外光下更不刺眼、对比更低、也不容易被旁人一眼看出「在刷手机」。
两套共用同一份 00_总纲_听话照做.html，只是初始参数不同。

← 回 00 今日工作台 01 规划说明 02 强度盘点 03 45 张表索引 06 C 级六项 05 真题排期

怎么切：首页标题条右上角有个「暖纸底 / 深色底」按钮，点一下即时切换，选择记在本机浏览器里（localStorage.cet4_skin），下次打开还是那一套。
想直接看某一套，在地址后面加 ?skin=paper 或 ?skin=dark 即可——本页下面两个窗口就是这么做的。

① 实时对照：同一页面，左右各一套

下面两个窗口是真的页面，不是截图——可以各自独立滚动、切换标签、勾选任务。唯一的区别是地址栏参数：左边 ?skin=dark，右边 ?skin=paper。

两边可独立滚动

默认 · 深色底　用在晚上那段（电脑 70 分钟）?skin=dark

暖纸底　用在白天手机那三段（合计 53 分钟）?skin=paper

② 色板逐项对照：12 个角色，一一对应

两套皮肤的颜色不是重新挑的，是按角色一一换的——同一个变量在两套里承担同一件事，所以布局、字号、间距、层级关系完全一致，换的只有观感。

角色	默认深色底	暖纸底	用在哪	对该皮肤底色的对比度
页面底色 `bg`	`#0d1117`	`#f6f1e6`	整页大面积色，决定第一眼是「夜」还是「纸」	—
卡片 / 表面 `panel`	`#161b22`	`#fffdf6`	任务卡、KPI 格、表格底	—
次级表面 `panel2`	`#1c2128`	`#efe8d9`	表头、输入框底、代码块	—
描边 `bd`	`#30363d`	`#d9cdb6`	1px 边框，深色靠它分层，纸色靠它托住白卡	—
正文 `tx`	`#c9d1d9`	`#3b3228`	默认文字色	12.3 AAA 11.1 AAA
次要文字 `dim`	`#8b949e`	`#7d6f5c`	说明、注释、单位	6.2 AA 4.3 AA 大字
强调文字 `strong`	`#e6edf3`	`#2e271f`	小标题、数字加粗	16.0 AAA 13.1 AAA
主强调 `blue`	`#58a6ff`	`#2f6087`	蓝色设备组、链接、「开练」	7.5 AAA 5.9 AA
次强调 `warn`	`#d29922`	`#9a6f1f`	橙色设备组、警示条	7.5 AAA 4.0 AA 大字
风险 `bad`	`#f85149`	`#b03f30`	红线卡左边框、警示	5.6 AA 5.2 AA
完成 `ok`	`#3fb950`	`#3f7a37`	打卡按钮、通过标记	7.4 AAA 4.6 AA
开练 `purple`	`#bc8cff`	`#6b4a72`	任务右侧的跳转按钮	7.5 AAA 6.5 AA

别把差别归给「对比度」——两套都远超 AAA。 实测：正文在各自底色上是 12.3 : 1（深色） 对 11.1 : 1（暖纸），都过了 AAA 的 7 : 1。真正的差别不在比值，在发光还是反光：
· 深色底是屏幕发光——暗环境里舒服，强光下反而糊（屏幕亮度拼不过太阳）；
· 暖纸底是屏幕模拟反光——亮环境下更接近纸，但夜里关灯看会显得灰、字形发虚。
所以两套的分工是场景分工，不是「哪个更好看」。

③ 三处最明显的观感差异

位置	默认深色底	暖纸底
任务卡	深灰卡浮在更黑的底上，靠亮一档分层	近白卡浮在米黄底上，靠1px 描边 + 暖色阴影感分层；卡片边界更清楚，像一叠便签
数字（KPI）	纯白数字，冲击力强，扫一眼就看到	深棕数字，克制；适合慢慢看，不适合远距离扫读
标签与状态	绿/黄/红在高饱和区，一眼区分	降饱和后变成「印刷色」，区分度略降，但长时间看不累

建议的用法（不是二选一）：
① 早上和午休（手机 53 分钟）→ 暖纸底。户外 / 教室 / 通勤，低对比更舒服；
② 晚上那 70 分钟（电脑）→ 深色底。夜里屏幕亮度低，深底更省眼；
③ 模考日 → 深色底。需要远距离扫读数字和判据，高对比有用。
两套切换是同一个按钮，不需要记什么——觉得刺眼就点它。

实现说明
· 两套皮肤共用一个 HTML 文件，靠 html[data-skin="paper"] 一组覆盖规则实现，不改 DOM、不加载第二份 CSS 文件、不需要重新构建
· 覆盖规则只改颜色与描边，未改动任何字号、间距、栅格与交互——所以两套的版式完全一致
· 对比度按 WCAG 2.1 相对亮度公式实算，不是估计值
· 切换结果存在 localStorage.cet4_skin；带 ?skin= 参数访问时以参数为准，不覆盖你的选择
生成时间：2026-11-01