Dashboard Theme Changer Skill v2
用一句话修改 OpenClaw Dashboard 的主题颜色。支持任意 #RRGGBB 色值,自动计算所有 hover/muted/glow 变体,鲁棒地处理文件路径变化。
触发条件
匹配以下任一说法时调用:
- "修改 Dashboard 颜色"、"换主题色"、"改变 dashboard 颜色"
- "把 Dashboard 改成 [颜色]"、"把主题换成 [颜色]"
- "Dashboard 换成 [颜色名]"
输入
color(必填):目标十六进制颜色,如#2775b6、#fcd337、#5865F2
也支持直接说颜色名,自动映射:
- 蓝色
#2775b6、紫色#5865F2、绿色#22c55e - 橙色
#f59e0b、青色#14b8a6、粉色#ec4899 - 黄色
#fcd337、红色#ef4444
工作原理
- 动态定位文件 — 自动在 OpenClaw 安装目录找到当前版本的 CSS 和 JS 文件(不受文件名 hash 影响)
- 更新 CSS 变量 — 替换所有
--accent相关变量(dark mode、light mode、openknot、dash 等全部主题) - 更新 JS Bundle — 替换 JS 里硬编码的 accent 色值
- 自动计算变体 — hover / muted / subtle / glow 颜色根据主色自动推导
操作步骤
执行脚本
SKILL_DIR=~/.openclaw/workspace/skills/dashboard-theme
bash "$SKILL_DIR/change-theme.sh" "#fcd337"
色值校验规则
脚本会自动校验输入:
- 格式必须为
#RRGGBB(6位 hex) - 字母大小写均可
- 已有
#或无#都能识别
CSS 变量覆盖范围
脚本会替换以下 CSS 变量(在所有主题块中):
| 变量 | 用途 |
|---|---|
--accent | 主强调色 |
--primary | 主按钮色 |
--ring | 焦点环 |
--accent-hover | 悬停加深色 |
--accent-muted | 次要强调 |
--accent-subtle | 背景浅色(10% opacity) |
--accent-glow | 发光效果(20% opacity) |
--focus | 焦点高亮 |
JS Bundle 处理
OpenClaw 的 UI bundle(index-*.js)中包含硬编码的 accent 颜色。脚本会:
- 扫描 JS 中的高频出现颜色(排除标准色板:#007bff、#00e5cc、#f59e0b 等)
- 将上一个 accent 颜色替换为新颜色
- 保留 danger 色(
#ef4444类)不变
验证
运行后脚本自动验证:
✅ CSS --accent值是否正确✅ 是否消除了旧红色 accent 值
手动验证:强制刷新浏览器,确认主题色已更新。
示例
用户: "把 Dashboard 改成明黄色 #fcd337"
助手: 运行 change-theme.sh "#fcd337",回复"已改为 #fcd337,强制刷新浏览器生效 🎨"
用户: "换成紫色"
助手: 运行 change-theme.sh "#5865F2",回复"已改为紫色 #5865F2 🟣"
注意事项
- ⚠️ 升级 OpenClaw 后会被覆盖,重新运行命令即可
- ⚠️ 不要修改
change-theme.sh以外的文件 - ✅ 支持 idempotent(重复运行安全,不会累积替换)
- ✅ 自动适配文件名 hash 变化(v2.0 新增)
- 无需重启 Gateway,强制刷新浏览器即可