VSCode原生不支持窗口级透明背景,workbench.colorCustomizations仅作用于编辑区等Webview内元素,无法影响标题栏、任务栏缩略图及弹出菜单;真正透明需系统级补丁(如Windows的vscode-transparency)或插件配合,且各区域渲染路径独立。

VSCode 原生不支持窗口级透明背景,所谓“透明”全是系统级补丁或插件在底层硬凑出来的——直接改 settings.json 里的颜色值,最多只影响编辑区、侧边栏这些 Webview 内容,标题栏、任务栏缩略图、弹出菜单(比如 Ctrl+P)全都不买账。
为什么 workbench.colorCustomizations 设了 #00000000 还是不透明
这个配置只作用于 VSCode 内部渲染的 UI 元素,比如 editor.background、sideBar.background。它无法穿透 Electron 容器,更调不动窗口本身的 opacity 或 DWM 层级。
-
editor.background: "#00000000"只会让代码编辑区变透明,底下没开系统级透明,照样是灰白底 - 某些主题(如 One Dark Pro)会主动覆盖
sideBar.background,你写的透明色直接被无视 - 标题栏、滚动条、命令面板(
Ctrl+P)、右键菜单……全都不响应这个配置 - Windows 下必须用
vscode-transparency补丁才可能让整个窗口透底
Windows 用户想真·透明:必须用 vscode-transparency 补丁
这是目前最稳定、更新及时的方案,原理是替换 resources/app/out/vs/code/electron-sandbox/worker/workerMain.js 并注入 DWM API 调用,不改注册表、不装钩子,重启 VSCode 就生效。
- 补丁只兼容 Windows 10 2004+ / Windows 11;旧版系统即使打了也无效
- 必须确保 VSCode 以 GPU 加速模式运行(不能加
--disable-gpu参数) -
window.titleBarStyle必须设为"custom",设成"native"会直接关掉透明通道 - 别信网上那些教你在
electron.launchArgs里加"--enable-transparent-visuals"的方法——Electron 23+ 已废弃该参数,加了也没用
想加背景图?用 background 插件比手写 CSS 更稳
有人喜欢毛玻璃+壁纸,但直接改 main.css 风险高(升级 VSCode 会被覆盖),还容易引发渲染异常。插件方案更可控:
- 安装插件后,在
settings.json中配background.enabled开关 -
background.useDefault控制是否用插件自带图,关掉才能自定义 -
background.style用 CSS 写展示逻辑,例如:"background-size": "cover"、"opacity": "0.15" - 注意:插件只作用于编辑器内容区,不影响终端、标题栏等区域
终端透明背景 ≠ 编辑器透明背景,别混着调
VSCode 终端透明依赖系统能力,不是靠改一个颜色值就能搞定:
- Windows 上需同时满足:
window.titleBarStyle: "custom"+terminal.integrated.background: "#00000000"+ DWM 启用模糊 - macOS 实际是 vibrancy(毛玻璃),只在深色主题下生效;浅色主题下设了
terminal.integrated.background也会 fallback 到纯白 - Linux(尤其 Wayland)基本无解,Electron 当前没适配 wlr-layer-shell,调啥都白搭
-
terminal.integrated.background必须写十六进制带 alpha(如"#1e1e1e80"),写transparent或rgba()会被忽略
真正麻烦的从来不是怎么设,而是搞清「哪一层」在控制「哪一块」的透明——窗口边框、标题栏、终端、编辑区、弹出菜单,各自走的是完全不同的渲染路径。改错地方,花再久也是白忙。


















