feat(theme): add preset theme editor and expand theme token coverage

[Alexlangl]

概要

这个 PR 对应 #593，主要做了两件事：

1. 补齐主题系统和 preset/custom theme editor 的基础能力
2. 让一批常用界面的颜色和状态样式真正跟随主题，而不是继续写死

tips：不是一次性把整个仓库里所有颜色都推倒重来，而是先把用户最常看到、最容易感受到主题变化的部分 token 化

涉及到的变更

主题编辑能力

• 增加 preset 主题选择，支持 default / bubblegum / custom
• 支持在设置页里调整 custom theme 的基础配色
• 补齐了 system + custom preset 场景下的变量同步逻辑，保证系统明暗切换时自定义主题能正确更新
• 调整了主题设置页文案，让主题编辑器的界面表达和实际行为保持一致，现在明确为编辑基础配色

一批常用界面的主题适配

把一批高频页面和组件改成尽量走主题 token，而不是继续依赖固定颜色，包括：

• usage 图表和摘要卡片
• settings / import-export / WebDAV 相关提示状态
• sessions 批量管理相关状态色
• provider / config 表单里的一批 success / warning / error 样式
• preset 预览和 preset 按钮的一些显示细节

说明

目前剩下的固定颜色大多属于合理保留项，比如：

• 颜色选择器本身的预设色
• theme preset 的 seed 数据
• 主题编辑器里的颜色样本
• 个别图标资源本身的填充色

所以这条 PR 主要聚焦在真正会影响主题一致性的部分

验证

已执行：

pnpm typecheck
pnpm vitest run tests/components/theme-provider.test.tsx tests/components/ThemeSettings.test.tsx tests/components/SettingsDialog.test.tsx tests/components/ImportExportSection.test.tsx tests/components/WebdavSyncSection.test.tsx tests/components/SessionManagerPage.test.tsx

Related

Related to #593

[farion1231]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Keep them coming!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[farion1231]

感谢您的贡献，请查看一下是否有以下问题：

[P1] ThemeSettings.tsx (line 1127) 的 HEX 输入框不能正常逐字编辑。当前只有输入结果已经是完整合法 hex 时才会更新，导致中间态会被立刻回滚，实际几乎只能粘贴完整值。
[P1] ProviderPresetSelector.tsx (line 224) 的 bg-primary/12 在当前 Tailwind 3.4 配置下不会生成样式，这里应改成 /10、/15，或改成任意值写法。
[P2] ThemeSettings.tsx (line 34) 的 CUSTOM_THEME_FIELDS 把 primary、secondary、accent、card 等字段都映射成了通用的 Background/Foreground 文案，编辑器里可读性明显变差，建议改成专属 label key。
[P2] ThemeSettings.tsx (line 1082) 的拾色器拖拽监听挂在 window 上，但组件卸载时没有兜底清理，存在事件泄漏风险。
[P2] theme-provider.tsx (line 111) 和 ThemeSettings.tsx (line 130) 重复维护了一大套颜色算法；同时 theme-provider.tsx (line 600) 实际只消费 customTheme.light，customTheme.dark 现在基本是死数据。
[P2] UsageSummaryCards.tsx (line 19) 里 toneStyles 在组件内新建，又被放进 useMemo 依赖，UsageSummaryCards.tsx (line 42) 的缓存等于失效。
[P2] ThemeSettings.tsx (line 1147) 和 ThemeSettings.tsx (line 1198) 的拾色器缺少基本无障碍语义；同时 ThemeSettings.test.tsx (line 1) 只有 1 个用例，覆盖不了这次新增的大量交互。

[Alexlangl]

[P1] ThemeSettings.tsx (line 1127) 的 HEX 输入框不能正常逐字编辑。当前只有输入结果已经是完整合法 hex 时才会更新，导致中间态会被立刻回滚，实际几乎只能粘贴完整值。
[P1] ProviderPresetSelector.tsx (line 224) 的 bg-primary/12 在当前 Tailwind 3.4 配置下不会生成样式，这里应改成 /10、/15，或改成任意值写法。
[P2] ThemeSettings.tsx (line 34) 的 CUSTOM_THEME_FIELDS 把 primary、secondary、accent、card 等字段都映射成了通用的 Background/Foreground 文案，编辑器里可读性明显变差，建议改成专属 label key。
[P2] ThemeSettings.tsx (line 1082) 的拾色器拖拽监听挂在 window 上，但组件卸载时没有兜底清理，存在事件泄漏风险。
[P2] theme-provider.tsx (line 111) 和 ThemeSettings.tsx (line 130) 重复维护了一大套颜色算法；同时 theme-provider.tsx (line 600) 实际只消费 customTheme.light，customTheme.dark 现在基本是死数据。
[P2] UsageSummaryCards.tsx (line 19) 里 toneStyles 在组件内新建，又被放进 useMemo 依赖，UsageSummaryCards.tsx (line 42) 的缓存等于失效。
[P2] ThemeSettings.tsx (line 1147) 和 ThemeSettings.tsx (line 1198) 的拾色器缺少基本无障碍语义；同时 ThemeSettings.test.tsx (line 1) 只有 1 个用例，覆盖不了这次新增的大量交互。

感谢review

1. 现在 HEX 输入允许中间态编辑，只有在输入成为合法值后才会提交，不会再在逐字输入时被立即回滚。同时补了对应回归测试，覆盖 partial HEX -> valid HEX 的交互路径
2. 已改成当前 Tailwind 3.4 配置可生成的写法，并补了对应测试，确认预设徽标样式不会再因为 /12 丢失
3. primary / secondary / accent / card / popover 等字段都使用了各自专属的 label key，不再复用通用的 Background / Foreground 文案
4. 拖拽监听现在在组件卸载时会兜底清理，同时也补充 pointercancel 等路径，避免事件残留。同时补充相应测试覆盖卸载清理
5. 颜色算法已经抽到共享模块，避免 ThemeSettings 和 theme-provider 各自维护一套逻辑；同时 provider 现在会真实消费 customTheme.dark，不再只依赖 customTheme.light 推导显示
6. toneStyles 已移出组件作用域，不再导致 useMemo 依赖每次重建；并补充对应测试，确认相同 rerender 下不会重复计算
7. 拾色器现在补上了基本无障碍语义；同时 ThemeSettings 相关测试也从原先的单用例扩展到了多条交互回归，覆盖了 HEX 输入、中间态、拖拽清理、语义色 section、预览行为等

额外补充：

1. success / info / warning / error 正式纳入语义色体系，并接入 toast 与主题预览，避免预览和运行时行为不一致
2. 修复自定义 dark palette 的恢复、后续 light 编辑、reset light 以及 light-only / partial-dark 存储 payload 的兼容问题
3. 调整了预览区里原本会误导用户的假交互控件，避免它们进入 tab 顺序，减少无效可聚焦元素带来的可访问性问题

验证

• pnpm typecheck
• pnpm test:unit（ 215/215）

@farion1231

[Alexlangl]

Closing this for now. I’ve already put a fair amount of time into it, and I don’t want to keep investing more without knowing whether it’s something you still want to move forward.

If you’d like to revisit it later, feel free to let me know.

[farion1231]

Hey @Alexlangl, sorry for the slow response — I'm the sole maintainer of this project so review cycles can be longer than I'd like. That said, I do review every PR and I genuinely appreciate the work you've put into these three.

All three PRs are valuable to the project. If you're open to reopening them, I'm happy to help rebase onto the latest main and get them merged. Just let me know.

[Alexlangl]

Thanks for getting back to me — no worries at all, and I appreciate the clarification. I'm glad to hear the PRs are still useful.

@farion1231

[Alexlangl]

@farion1231

[Alexlangl]

I noticed the current CI failure is in Rust tests unrelated to this theme PR. My changes are limited to the frontend theme work, so I’d prefer not to include backend test fixes in this PR unless you’d like me to.
@farion1231

[Alexlangl]

Closing this stale PR in favor of a fresh PR rebased onto current main. Continued in #2046