怎么给 Codex 换皮肤：CodeDrobe Theme Skill 完整教程

CodeDrobe Theme 是 CodeDrobe 项目在 2026 年提供的可安装 Agent Skill，用于为 Codex 等 Chromium/Electron 桌面应用创建、应用、验证和恢复主题。Codex 原生“外观”设置已经能修改基础主题、强调色、背景色、前景色及字体；如果还需要自定义 CSS、背景图片、首页布局和可分发主题包，codedrobe-theme 会调用 @codedrobe/core 完成 DOM 快照、兼容性预检、主题注入、截图验证与事务式恢复。整个流程不替换应用安装包，失败后可用一条命令还原。

给 Codex 换皮肤，是修改桌面应用或终端界面的颜色、字体、背景与组件样式；只改配色优先用原生功能，需要完整 CSS 和图片主题时再使用 CodeDrobe。

Codex 原生主题和 CodeDrobe 有什么区别

Codex 原生设置与 CodeDrobe 解决的是不同层级的问题，选择前先确定自己只想改配色，还是要重做完整视觉表现。

如果只是给 Codex App 换颜色，可以先打开 Settings > Appearance。如果是 Codex CLI，在交互界面运行 /theme；自定义高亮文件放入 $CODEX_HOME/themes 后，也能在主题选择器中预览。

CodeDrobe 的运行结构与要求

codedrobe-theme 负责告诉 Agent 应该怎样安全换肤，@codedrobe/core 才是真正执行检测、CDP 连接、打包、应用和恢复的 CLI。

截至 2026 年 7 月，官方仓库给出的关键数据包括：

CodeDrobe 当前公开支持的应用目标包括 Codex 和 WorkBuddy。项目采用 Apache-2.0 许可，但它是独立项目，并非 OpenAI 官方组件。

第一步：安装 codedrobe-theme Skill

安装命令是复数形式的 npx skills，它把工作流安装给 Codex Agent，不负责执行主题注入。

先查看仓库中可安装的 Skill：

npx skills add CodeDrobe/skills --list

再把普通用户换肤 Skill 全局安装给 Codex：

npx skills add CodeDrobe/skills \
  --skill codedrobe-theme \
  --global \
  --agent codex \
  --yes

这里的 --agent codex 表示“由哪个 Agent 接收 Skill”，不是选择要换肤的桌面应用。真正的目标应用由后续命令中的 --app codex 指定。

第二步：安装 Core 并检测 Codex

重复使用时适合全局安装 Core；只体验一次，也可以用 npx --yes @codedrobe/core@latest 代替 codedrobe。

npm install --global @codedrobe/core

codedrobe --version
codedrobe apps --json
codedrobe detect --app codex --json

apps --json 用于确认当前支持的应用、默认值和最近验证版本；detect 用于寻找实际安装路径。自定义安装位置可以显式传入：

codedrobe detect \
  --app codex \
  --app-path "/ABSOLUTE/PATH/TO/Codex.app" \
  --json

路径必须替换成真实绝对路径。不要为了省事去修改、替换或重新签名 app.asar、应用程序包或 WindowsApps 文件。

第三步：让 Skill 创建主题

安装 Skill 后，可以直接让 Codex 按官方工作流创建主题，而不是手工猜测应用 DOM 选择器。

一个可复用的提示词是：

使用 codedrobe-theme Skill，目标应用设为 codex。
从 assets/theme-starter 复制一份主题源码到当前工作区，
分别采集 Codex 首页和普通任务页面的 DOM 快照，
根据实时快照修正 CSS，打包、预检并生成验证截图。
应用主题前不要关闭或重启正在运行的 Codex；如必须重启，先向我确认。

DOM 快照用于寻找真实语义节点。官方说明该快照是只读的，并排除页面文本、表单值、可访问名称、链接和媒体源；首页与普通会话仍需分别采集，因为两种页面结构并不相同。

主题源码通常包含以下文件：

my-theme/
├── theme.json
├── codex.css
└── assets/
    ├── hero.png
    └── texture.png

主题 CSS 应限定在 html.codedrobe-host-codex 下，装饰图层应使用 pointer-events: none，避免遮挡侧边栏、输入框、菜单和原生导航。

第四步：预检、应用并验证主题

主题必须先检查包结构和实时 DOM，再应用到 Codex；静态 CSS 能通过解析，不代表它与当前应用版本兼容。

codedrobe theme inspect "/ABSOLUTE/PATH/my-theme.codedrobe-theme"

codedrobe probe \
  --app codex \
  --theme "/ABSOLUTE/PATH/my-theme.codedrobe-theme" \
  --timeout-ms 5000

codedrobe apply \
  --app codex \
  --theme "/ABSOLUTE/PATH/my-theme.codedrobe-theme"

codedrobe verify \
  --app codex \
  --theme "/ABSOLUTE/PATH/my-theme.codedrobe-theme" \
  --screenshot "/ABSOLUTE/PATH/codex-theme-preview.png"

probe 只做预检，不安装主题；verify 会检查主题 ID、版本、样式、命名图片、Renderer Profile、必需节点和横向溢出，并可输出 PNG 截图。

验证时至少检查：

1. 首页 Hero、建议卡片、项目选择器和输入框。
2. 普通任务中的正文、代码块、工具输出、滚动和输入框。
3. 页面没有横向溢出，装饰层不会拦截点击。
4. 主题 ID、版本和图片资源与包内清单一致。

如果主题的 baseTheme 改动了 Codex 宿主外观设置，而应用已经运行，Core 可能要求 --restart-existing。该参数会关闭并重启现有应用，只有明确接受重启时才能添加。

换肤会不会影响模型和 API 配置

CodeDrobe Core 只管理 ~/.codex/config.toml 中受控的 [desktop] 外观键，并在自己的状态目录创建事务式备份，不应改写模型 Provider 或 API Key。

例如已经使用七牛云 API Key 配置 OpenAI-compatible 编程接口时，应用主题后应再次检查原有 model_provider 和鉴权环境变量仍然存在。主题系统负责界面，模型连接仍由 Codex 配置独立管理。

如何恢复原来的 Codex 界面

恢复主题应使用 Core 自带命令，不要删除 Codex 数据目录或手工覆盖配置文件。

codedrobe restore --app codex

恢复完成后应确认：主题样式、根节点 Host Class 和主题数据已经移除；如果应用主题时修改过受管外观键，事务式备份也已经还原。

常见问题

Q：为什么 codedrobe 命令不存在？

Skill 安装器和运行时是两个包。npx skills 只安装工作流，还需要全局安装 @codedrobe/core，或者把命令改写为 npx --yes @codedrobe/core@latest <command>。同时确认 Node.js 不低于 22.4。

Q：为什么 probe 提示缺少节点？

adapter:<name> 缺失通常表示应用渲染器变化或选错 CDP 目标；theme:<name> 缺失表示主题依赖的页面节点发生变化。应重新采集真实 DOM 快照并修复 CSS，不要静默删除验证要求。

Q：端口 9335 被占用怎么办？

不要直接终止未知进程。选择一个新的本地端口，并在 launch、probe、apply、verify 和 restore 中始终传入同一个 --port。CDP 只应绑定回环地址。

Q：Codex 更新后主题失效怎么办？

先运行 codedrobe update --check，再对新版本重新执行 DOM 快照和 probe。主题模板不是永久 DOM 合约；依赖首页结构的 CSS 应根据最新快照修复，然后提升主题版本、重新打包并验证。

Q：主题包可以直接从网上下载后应用吗？

主题包应视为不可信输入。应用前必须运行 theme inspect 和 probe；不要允许外部 CSS 资源、脚本或事件处理器，也不要使用伪造整窗截图的覆盖层。来源不明且无法检查的主题不应安装。

结论与参考资料

给 Codex 换皮肤有三种层级：桌面端基础外观使用 Settings，CLI 代码高亮使用 /theme，完整 CSS 与图片主题使用 CodeDrobe。后者的正确流程是安装 Skill 和 Core、采集实时 DOM、预检、应用、双页面验证，最后保留可用的恢复命令。

据 OpenAI Codex 官方设置文档与 CodeDrobe 官方仓库说明，主题能力和页面结构都会随应用更新而变化。本文内容基于 2026 年 7 月 17 日公开资料，执行前应重新运行 codedrobe apps --json 并核对当前支持信息。

参考资料：

• CodeDrobe Skills
• CodeDrobe Core
• OpenAI Codex App 设置
• OpenAI Codex CLI 主题
• 七牛云AI编程