WorkBuddy 毛玻璃主题 · Windows 通用换肤工具
为 WorkBuddy 桌面客户端(Electron 应用) 提供一套可注入的「深空樱雾」毛玻璃(frosted-glass)视觉主题。
技术实现:asar 归档内联 CSS 注入 —— 将一段自包含样式块追加到 app.asar 内 renderer/assets/index-*.css 末尾,
覆盖 WorkBuddy 原生 CSS 变量与关键组件样式,重启客户端后持久生效。
两种构建产物
| 产物 | 背景 | 包体 | 适用场景 |
|---|---|---|---|
静态 static |
星空 JPEG 内联 base64 | 轻量(≈0.2 MB) | 低开销、快速加载 |
动态 dynamic |
纯 CSS 动画星场(极光漂移 + 星点闪烁,零外部依赖) | 极小(≈9 KB) | 灵动氛围、零带宽占用 |
两种产物共享同一套界面规格(毛玻璃参数、控件透明度、侧栏无边)。
关键技术机制
- WorkBuddy 换肤变量体系是
--cb-*(非 VSCode 的--vscode-*)。正确作用域:body[data-application-name=workbuddy]。 - 背景四件套必须齐备:
background-size:cover/center/no-repeat/fixed。 - 侧栏最终规格:完全无边框
border:none。 - 注入块以
/* WORKBUDDY_SKIN */开头、/* END SKIN */结尾;重装时按前缀剥离旧块再注入,幂等不累积。
一键安装(Windows)
> 在系统终端运行(勿在 WorkBuddy 内置终端执行,脚本需退出 WorkBuddy 以替换 app.asar)。
> 需本机已装 Node.js(首次会自动安装 @electron/asar)。
apply.bat :: 默认装【静态】皮肤
apply.bat dynamic :: 装【动态】皮肤(CSS 动画星场)
脚本行为:
1. 自动探测 WorkBuddy 安装路径(%LOCALAPPDATA% / ProgramFiles / ProgramFiles(x86) / D:、E: 盘 / 注册表),支持 WB_PATH 环境变量覆盖;
2. 非管理员自动 RunAs 提权;
3. 替换前自动时间戳备份 app.asar 到 %USERPROFILE%\WorkBuddy\;
4. 清理可能弄崩 node/asar 的 NODE_OPTIONS;
5. asar 缺失时自动安装,路径统一引号包裹。
还原 / 回滚
rollback.bat :: 自动选最新备份还原
重装 / 升级 WorkBuddy 会还原 app.asar,主题丢失,重跑 apply.bat 即可(约 1 分钟)。
文件清单
workbuddy-skin-windows/
├── SKILL.md
├── README.md
├── apply.bat / apply.ps1 # 安装(双模式,幂等,自提权)
├── rollback.bat / rollback.ps1 # 回滚
└── assets/
├── static/ skin.css · bg.b64.txt · skin.template.css # 星空 JPEG 背景
├── dynamic/ skin.css # 纯 CSS 动画星场
└── preview/ starry-sky.png · starry-sky.mp4 # 效果示意(非运行必需)
注意事项
- 应用更新后需重新应用:WorkBuddy 升级会还原
app.asar,主题丢失,重跑 apply 即可。 - 仅修改 app.asar:不触碰应用本体其他文件;备份保留在用户目录。
- 通用合规:本包不含任何个人数据或硬编码本地路径,可跨机器分发;示意素材(星空 PNG/MP4)为通用生成图,可替换为企业/个人自有或已授权素材。
- 安装后:在 WorkBuddy 选「深色主题」以确保文字可读性。