写代码的时候,编辑器是盯得最久的东西,所以我把 dsh-deep-whale 里很喜欢的 maid-atelier(深海女仆工坊) 皮肤移植到了 VS Code,做成了 vscode-whale-maid。
先看效果:

都改了什么
- 舞台:编辑区背后是夜之宫殿和两位鲸鱼娘女仆,代码区半透明地叠在上面,透明度可调,不影响看代码
- 侧边栏:金框深蓝面板、四角金色角花、深蓝缎带样式的选中行,底部还有一只 Q 版鲸鱼娘和蕾丝垂花
- 顶部和底部:深蓝金线饰带 + 白蕾丝 + 蝴蝶结,底部是金线和金色徽饰
- 配色:深海蓝 + 金色,欢迎页、终端、弹窗、状态栏都统一了
- 看板娘扩展:资源管理器里住着一只鲸鱼娘,会跟着你的状态换表情:
| 你在做什么 | 她的反应 |
|---|---|
| 认真打字 | 一脸认真 |
| 保存文件 | 开心 |
| 代码报错 | 晕倒 |
| 很久没动 | 打瞌睡 |
| 点她一下 | 被摸头 |
状态栏还会显示她的台词(比如截图右下角的"主人,要喝茶吗?")。
安装(Windows)
-
克隆到用户目录:
git clone https://github.com/wuheshidaozod/vscode-whale-maid "%USERPROFILE%\.vscode-whale" -
安装看板娘扩展和 CSS 注入扩展:
code --install-extension "%USERPROFILE%\.vscode-whale\whale-maid-0.1.0.vsix" code --install-extension be5invis.vscode-custom-css -
打开用户设置 JSON(
Ctrl+Shift+P→ Preferences: Open User Settings (JSON)),把仓库里settings.example.jsonc的两项合并进去,路径里的<你的用户名>换成自己的。 -
Ctrl+Shift+P→ Enable Custom CSS and JS,按提示重启 VS Code。
macOS / Linux 克隆到 ~/.vscode-whale,CSS 路径写成 file:///Users/<你>/.vscode-whale/whale.css(Linux 是 /home/<你>/...)。
注意:装饰部分靠 Custom CSS and JS Loader 注入 CSS,它会修改 VS Code 的安装文件。所以 VS Code 会提示"安装似乎损坏"(可以选"不再显示"),而且每次 VS Code 更新后都要重新执行一次 Enable。如果只想要配色和看板娘,跳过第 3、4 步就行。
按自己口味调整
whale.template.css 开头有几个参数:
| 参数 | 作用 |
|---|---|
--whale-stage-veil | 盖在女仆上的深蓝薄纱:越大代码越清楚、女仆越淡 |
--whale-palace-veil | 宫殿背景的明暗 |
--whale-editor-glass | 代码区底色不透明度 |
--whale-sidebar-mascot | 侧边栏 Q 版女仆不透明度 |
改完重新生成,再在 VS Code 里执行 Reload Custom CSS and JS:
pip install pillow
python build.py看板娘的台词在 mascot/extension.js 开头的 LINES 里,可以换成自己喜欢的,改完 python build.py 后重新安装生成的 .vsix。睡着前等待的分钟数、要不要在状态栏显示台词,在设置里搜"鲸鱼娘"就能找到。
授权与署名
- 代码:MIT
- 美术素材:CC BY-NC-SA 4.0,仅限非商业使用
素材的署名链:
- 一创:上善,鲸鱼娘角色原案
- 二创:ZipZipPipe,加入 DeepSeek 元素的女仆鲸鱼娘二次设计
- 三创:Small-tailqwq,dsh-deep-whale / maid-atelier 皮肤
- 本项目:移植到 VS Code(缩放、裁切、翻转、转 WebP)
感谢各位画师和原皮肤作者。有问题欢迎到 GitHub 仓库 提 issue,请不要直接打扰画师。