先说结论:VSCode 原生不支持窗口级透明,要实现所谓的“毛玻璃”或“背景透明”效果,必须走系统级补丁、插件配合或手动注入 CSS 这三条路。不过,每条路径的生效范围和限制各不相同——直接去改 workbench.colorCustomizations 里的 editor.background,设成 #00000000 是没用的,Electron 根本不会理你。
为什么直接改 workbench.colorCustomizations 加 alpha 色值没用
这个配置只影响 VSCode 内部 Webview 渲染的 UI 区域——比如编辑器内容区、侧边栏,但它无法穿透到窗口容器层。你设了 "editor.background": "#00000000",编辑区看起来是透明了,但底下如果没开系统级透明,实际还是灰白底;标题栏、滚动条、Ctrl+P 弹窗、任务栏预览图全都不受影响。
常见错误现象很典型:
- 保存 settings.json 后重启,编辑器背景仍是纯黑或纯白,纹丝不动
- 终端或侧边栏颜色变了,但编辑区背景完全没反应
- 用了 One Dark Pro 这类主题后,自己写的透明色被主题覆盖掉
根本原因在于 VSCode 运行在 Chromium 上,而默认窗口是 opaque 的,Electron 不允许直接渲染带 alpha 的主窗口背景。
Windows 下真正生效的透明方案:vscode-transparency 补丁
这是目前最稳定、适配最新版 VSCode(1.86+)的方案。原理是替换 resources/app/out/vs/code/electron-sandbox/worker/workerMain.js,并调用 Windows DWM API 实现分层窗口透明 + 模糊(acrylic/mica)。
实操要点:
- 去 GitHub 搜索
vscode-transparency,下载匹配你 VSCode 版本的补丁包(1.86+ 必须用 v1.12+) - 补丁安装后,在
%APPDATA%\Code\User\settings.json中添加:"transparency.opacity": 0.85, "transparency.blur": "acrylic"
- 必须加启动参数
--disable-hardware-acceleration防止模糊闪烁(可在快捷方式目标栏末尾追加) - 重启 VSCode——不是重载窗口,只有重启才加载新 worker.js
需要注意:transparency.opacity 别设低于 0.7,否则标题栏文字会发虚;blur 在 Windows 10/11 才有效,旧系统只能用透明无模糊。
跨平台通用的图片+局部透明方案:vscode-background 插件
它不改窗口层,只在编辑器 DOM 层叠一张带 opacity 的 background-image,兼容所有系统,但仅作用于编辑区、侧边栏、面板等可被 CSS 控制的区域。
关键配置项(写在用户 settings.json 中):
background.enabled: true 开启插件background.useDefault: false 关闭默认图background.customImages: 指定本地图片路径,如["file:///D:/bg.jpg"]background.style: 用内联 CSS 控制缩放/定位,例如"background-size: cover; background-position: center;"- 各区域透明度单独控制:
background.editorOpacity、background.sidebarOpacity,推荐值 0.1–0.3(过高影响代码可读性)
容易踩的坑:
- 路径必须用
file://协议,相对路径或直接填盘符路径(D:\bg.jpg)会失败 - 图片太大(>5MB)会导致编辑器卡顿,建议压缩到 1920×1080 以内、WebP 格式
- macOS/Linux 下无法影响 Dock 预览图和 Mission Control 缩略图,它们永远是不透明矩形
终端背景单独调暗又不失通透:用 terminal.integrated.background + backgroundOpacity
终端是唯一原生支持独立背景色与透明度的模块,不需要插件或补丁。
正确做法:
- 打开命令面板,执行
Preferences: Open Settings (JSON) - 在
settings.json中添加两行:"terminal.integrated.background": "#0d0d0d", "terminal.integrated.backgroundOpacity": 0.85
- 不要用 rgba 或 #rrggbbaa 格式——
background只认纯色,透明度必须走专用字段
为什么这么配:
#0d0d0d比纯黑#000000更护眼,保留灰阶层次backgroundOpacity设 0.85 是平衡点:再低(如 0.3)会透出编辑器背景,导致文字边缘发虚- 如果发现 Windows 终端边缘有毛边,把 opacity 改成 0.92 或直接删掉这一行,只留深色背景更稳
真正复杂的地方在于:窗口透明、编辑区透明、终端透明、背景图叠加,这四者底层机制完全不同,不能混用同一套逻辑去调。一个设置在 Windows 有效,在 macOS 上可能完全失效,甚至引发渲染异常——动手前先确认你的 OS 和 VSCode 版本,再选对应路径。