From d91eeca5dec1867cff787509218ca2a49d213dc8 Mon Sep 17 00:00:00 2001 From: zhangxiang Date: Thu, 3 Sep 2026 16:01:08 +0800 Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E4=B8=BB=E9=A2=98=E4=B8=89?= =?UTF-8?q?=E6=80=81=E5=81=8F=E5=A5=BD=E6=A8=A1=E5=9E=8B=EF=BC=8C=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E8=B7=9F=E9=9A=8F=E7=B3=BB=E7=BB=9F=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 src/lib/theme.ts：三态偏好单一真源 （system/light/dark，无存储值默认跟随系统） - ThemeToggle 改三态循环（Monitor→Sun→Moon）： 实时监听 prefers-color-scheme（仅 system 档生效） + storage 跨标签页同步；尺寸位置不变 - layout.tsx FOUC 内联脚本支持 system 档， 首帧前解析避免闪烁 - e2e 视觉回归 L2 改用 test.use({ colorScheme }) 驱动 （事后 setAttribute 存在被挂载效果覆盖的竞态） - header.test.tsx lucide 白名单补 Monitor - CLAUDE.md 同步三态语义与 variant 踩坑 - 新增 scripts/audit/theme-system-verify.mjs （55 断言：首帧无闪烁/循环/实时跟随/旧值兼容/ 污染回退/6 路由冒烟） 验证：单测 131 套件 1662 通过 0 失败； tsc 0 错；eslint 0 错；next build 通过； 运行时 55/55 PASS（dogfood-output/theme-system-verify/） --- CLAUDE.md | 15 +- e2e/visual-regression.spec.ts | 38 +-- scripts/audit/theme-system-verify.mjs | 289 +++++++++++++++++++++ src/app/layout.tsx | 9 +- src/components/layout/header.test.tsx | 2 + src/components/theme/theme-toggle.test.tsx | 249 ++++++++++++++++++ src/components/theme/theme-toggle.tsx | 142 ++++++---- src/lib/theme.test.ts | 182 +++++++++++++ src/lib/theme.ts | 107 ++++++++ 9 files changed, 962 insertions(+), 71 deletions(-) create mode 100644 scripts/audit/theme-system-verify.mjs create mode 100644 src/components/theme/theme-toggle.test.tsx create mode 100644 src/lib/theme.test.ts create mode 100644 src/lib/theme.ts diff --git a/CLAUDE.md b/CLAUDE.md index e27650c..3c50a32 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -100,7 +100,18 @@ src/app/ When replacing a page or component with a new version, move the old one to an `_archive/` subdirectory (e.g., `src/app/(marketing)/_archive/` for old homepage iterations). The archive is excluded from TypeScript compilation via `tsconfig.json`. ### Dark Mode -Dark mode uses the `data-theme="dark"` HTML attribute (not Tailwind's `dark:` class). An inline `