Dashboard Theme Changer Skill v2

---

name: openclaw-dashboard-theme

slug: openclaw-dashboard-theme

version: 2.0.0

description: Change OpenClaw Dashboard accent color with one sentence. Dynamically finds CSS/JS files and updates all accent CSS variables.

---

# Dashboard Theme Changer Skill v2

用一句话修改 OpenClaw Dashboard 的主题颜色。支持任意 `#RRGGBB` 色值，自动计算所有 hover/muted/glow 变体，鲁棒地处理文件路径变化。

触发条件

匹配以下任一说法时调用：

输入

也支持直接说颜色名，自动映射：

工作原理

1. **动态定位文件** — 自动在 OpenClaw 安装目录找到当前版本的 CSS 和 JS 文件（不受文件名 hash 影响）

2. **更新 CSS 变量** — 替换所有 `--accent` 相关变量（dark mode、light mode、openknot、dash 等全部主题）

3. **更新 JS Bundle** — 替换 JS 里硬编码的 accent 色值

4. **自动计算变体** — hover / muted / subtle / glow 颜色根据主色自动推导

操作步骤

执行脚本

SKILL_DIR=~/.openclaw/workspace/skills/dashboard-theme
bash "$SKILL_DIR/change-theme.sh" "#fcd337"

色值校验规则

脚本会自动校验输入：

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 颜色。脚本会：

验证

运行后脚本自动验证：

手动验证：强制刷新浏览器，确认主题色已更新。

示例

**用户：** "把 Dashboard 改成明黄色 #fcd337"

**助手：** 运行 `change-theme.sh "#fcd337"`，回复"已改为 #fcd337，强制刷新浏览器生效 🎨"

**用户：** "换成紫色"

**助手：** 运行 `change-theme.sh "#5865F2"`，回复"已改为紫色 #5865F2 🟣"

注意事项