原文鏈接 jinkey.ai/post/tech/r… 轉載請注明出處
1 安裝自定義 JS 和 CSS 插件
2 安裝發光主題
3 添加樣式配置文件
在 VSCode 安裝目錄(自己隨便選擇一個文件夾也可以),放入以下文件。 為了方便下載,文件整理到了 Github-Jinkeycode/vscode-transparent-glow,歡迎 star。
enable-electron-vibrancy.js
開啟 electron 透明支持

vscode-vibrancy-style.css
這里使用 @孤狼 大佬提供的樣式
synthwave84.css
文字發光樣式,樣式請在 Github 獲取。如果要不發光的,可以使用 synthwave84-noglow.css
。可以 watch github.com/robb0wen/sy… 保持更新通知。
toolbar.css
引入以上大神的樣式配置之后,左邊導航欄有部分標題還是未透明狀態,我自己修改了配置,引入即可。
terminal.css
使 vscode 內置的終端透明
4 修改 VSCode 配置文件
點擊上圖 在 setting.json 中編輯
,打開后加入配置(不需要大括號,直接把 key-value 加入原有 json 即可):
5 重加載
按下 Ctrl + Shift + P,運行 "Reload Custom CSS and JS", 重啟 vscode 即可。如果提示VSCode 已經損壞
,選擇右上角齒輪“不再提示”即可。
6 總結
成品效果如圖,不懂的可以加小助手微信 udujjb 拉你進群詢問
以上教程是基於 MacOS 的,Linux 用戶如何開啟透明請參考,Windows 的electron暫不支持vibrancy模式。 Custom CSS and JS Loader 配置 Linux 透明窗口