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

先看效果:

vscode-whale-maid 效果图

都改了什么

  • 舞台:编辑区背后是夜之宫殿和两位鲸鱼娘女仆,代码区半透明地叠在上面,透明度可调,不影响看代码
  • 侧边栏:金框深蓝面板、四角金色角花、深蓝缎带样式的选中行,底部还有一只 Q 版鲸鱼娘和蕾丝垂花
  • 顶部和底部:深蓝金线饰带 + 白蕾丝 + 蝴蝶结,底部是金线和金色徽饰
  • 配色:深海蓝 + 金色,欢迎页、终端、弹窗、状态栏都统一了
  • 看板娘扩展:资源管理器里住着一只鲸鱼娘,会跟着你的状态换表情:
你在做什么她的反应
认真打字一脸认真
保存文件开心
代码报错晕倒
很久没动打瞌睡
点她一下被摸头

状态栏还会显示她的台词(比如截图右下角的"主人,要喝茶吗?")。

安装(Windows)

  1. 克隆到用户目录:

    git clone https://github.com/wuheshidaozod/vscode-whale-maid "%USERPROFILE%\.vscode-whale"
  2. 安装看板娘扩展和 CSS 注入扩展:

    code --install-extension "%USERPROFILE%\.vscode-whale\whale-maid-0.1.0.vsix"
    code --install-extension be5invis.vscode-custom-css
  3. 打开用户设置 JSON(Ctrl+Shift+P → Preferences: Open User Settings (JSON)),把仓库里 settings.example.jsonc 的两项合并进去,路径里的 <你的用户名> 换成自己的。

  4. 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,仅限非商业使用

素材的署名链:

  1. 一创:上善,鲸鱼娘角色原案
  2. 二创:ZipZipPipe,加入 DeepSeek 元素的女仆鲸鱼娘二次设计
  3. 三创:Small-tailqwq,dsh-deep-whale / maid-atelier 皮肤
  4. 本项目:移植到 VS Code(缩放、裁切、翻转、转 WebP)

感谢各位画师和原皮肤作者。有问题欢迎到 GitHub 仓库 提 issue,请不要直接打扰画师。