把 WordPress 主题改成 claude.com 暖色调：我做了一个 fork

一、写在前面：为什么会有这个 fork

作为一个程序员，日常写笔记几乎是刚需——温故知新、下次遇到不用再翻半天。而 WordPress 上一个好的文档类主题，既要方便记录，又要方便查询，还要看着舒服。

原版 theme-document（by 友人a丶）本身已经做得很好：功能完整、代码有注释、适合学习，nicen.cn 跑的就是这个主题。但我总感觉它的色调偏冷——页面背景冷白、文字色冷灰、强调色蚂蚁绿——整体偏"技术感"，少了点让人想长时间阅读的温度。

于是就有了这个 fork：基于原版做纯视觉层面的改造，参考 claude.com/blog 的风格，换成暖色调配色和排版。功能不动、模板不动，原主题的所有能力完整保留。

二、改造的核心逻辑：claude.com 教会了我什么

claude.com 的产品页面从 2025 年开始就给人留下很深印象。暖色调、克制但不失个性的字体搭配、大量留白的排版——让人感觉不是在读技术文档，而是在翻一本有温度的手账。

我对照 claude.com/blog 的视觉系统，把几个关键维度做了迁移：

配色是最直观的改变。 原版的页面背景是 #f5f7fd 冷白，主文字是 #333，强调色是 #3eaf7c 蚂蚁绿——标准偏冷科技风。现在统一换成 #FAF9F5 暖白背景、#1F1E1B 暖深棕文字、强调色换成 #C75F2C 赤陶橙。暗色模式也从 #333 冷灰变成 #1A1815 暖深底。

字体策略也值得一说。 Claude 官网用的 Tiempos 和 Sohne 是 Anthropic 内部商业字体，公网访问不到。这个 fork 做了一个合理的降级回退栈：优先用 Inter（装了就用），然后回退到系统无衬线，中文走苹方 / 思源黑体，衬线正文回退到思源宋体。对大多数用户来说体验不会差太多。

全局行高从 1.75 收紧到 1.6，视觉上更紧凑但不拥挤。按钮和卡片圆角也统一了（分别 8px 和 12px），比原版更有设计体系感。

三、改造涉及了哪些文件

这次改动全部在样式层，不碰任何 PHP / JS 业务逻辑：

• assets/extra/variant.scss — 全量重写 :root 默认 token，去掉原版 8 套主题色变体（.theme-one ~ .theme-eight），只保留一套暖色默认
• assets/extra/dark.scss — 暗色 token 改写，暖深底 + 暖白文字
• assets/extra/common.scss — 引入字体栈、调整全局行高、统一链接过渡动画、加入 @media (prefers-reduced-motion: reduce) 无障碍支持
• assets/extra/normal.scss — 批量替换 14 处硬编码颜色，追加 90 行组件级微调（磨砂顶栏、按钮 hover 抬升、卡片化、代码块圆角等）
• assets/extra/w-1024.scss / w-480.scss — 响应式文件中的硬编码颜色清理
• include/config.php — 后台主题色 / 背景色 / 头部色默认值更新
• include/themes/load.php — 新增 nicen_theme_claude_color_overrides() 钩子，在原主题 inline .personal{} 注入之前强制使用新色，绕过数据库中残留的旧色值
• template/index/fixed.php — 删除右侧"主题色切换"按钮（及其 9 个色块），保留"回到顶部"和"阅读进度"
• common/main.js — 删除 $('.theme-color div').click(...) 点击处理函数（18 行）
• common/inline/main.js — 删除 localStorage.getItem('theme-color') 死代码（5 行）

删掉配色切换按钮其实是个挺大的决定——原版 8 套主题色是很直观的功能，但装完大多数人其实不会去切换，只固定在一个配色上。我选择只保留默认暖色，把这个功能彻底移除了。

四、升级注意事项

如果你之前已经装了原版 theme-document，想升级到这个 fork，有几点要注意：

升级前先删除旧版 theme-document，再上传新 zip 到 /wp-content/themes 目录。不要直接覆盖——可能会留有旧 CSS 缓存问题。

如果升级后浏览器还是显示旧色，强刷一次（Ctrl+Shift+R）清掉 style.css 的 filemtime 版本缓存就能解决。

关于旧版 localStorage 中残留的 theme-color 值——来自已删除的 8 套配色，会作为空 class 写入 body，但 CSS 已无对应规则，无视觉影响。如果想清干净，在浏览器控制台执行 localStorage.removeItem('theme-color') 即可。

五、那些不得不接受的妥协

每一版视觉改造都有妥协，这个 fork 也不例外：

原 8 套主题色变体已移除。 如果你以后想重新启用，需要在 variant.scss 末尾追加 .theme-one ~ .theme-eight 块，并在 fixed.php 还原配色切换按钮。门槛不高，但需要手动操作。

个别组件的极个别 1px 细节色（比如 ICP 备案徽章边框色）保留为独立 token，没有强制统一到全局变量里。这块如果有人在意，欢迎提 issue。

小屏 / 平板断点文件（w-480.scss 等）只清理了硬编码颜色，没有做完整的视觉重设计。毕竟改动范围已经不小，先守住核心阵地。

六、写在最后

这个 fork 前后花了大半天时间，核心动力就一个：想让自己的笔记站看起来更像"值得反复翻的东西"，而不是冷冰冰的技术文档。

原版 theme-document 的作者 友人a丶 完成了绝大部分功能开发，我只是顺手做了一次风格上的"暖化"。如果你也在用这个主题，或者想给自己的 WordPress 换一个更有温度的视觉风格，欢迎来逛逛。

仓库地址：https://github.com/itsVicOC/theme-document-claude