1 安装自定义 JS 和 CSS 插件
2 安装发光主题
3 添加样式配置文件
在 VSCode 安装目录(自己随便选择一个文件夹也可以),放入以下文件。 为了方便下载,文件整理到了 Github-Jinkeycode[1]/vscode-transparent-glow[2],欢迎 star,https://github.com/Jinkeycode/vscode-transparent-glow。
enable-electron-vibrancy.js
开启 electron 透明支持
vscode-vibrancy-style.css
这里使用 @孤狼[3] 大佬提供的样式
synthwave84.css
文字发光样式,样式请在 Github 获取。如果要不发光的,可以使用 synthwave84-noglow.css
。可以 watch https://github.com/robb0wen/synthwave-vscode 保持更新通知。
toolbar.css
引入以上大神的样式配置之后,左边导航栏有部分标题还是未透明状态,我自己修改了配置,引入即可。
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 配置[4] Linux 透明窗口[5]
References
[1]
Github-Jinkeycode: https://github.com/Jinkeycode[2]
vscode-transparent-glow: https://github.com/Jinkeycode/vscode-transparent-glow[3]
@孤狼: https://blog.evolify.cn/ [4]
Custom CSS and JS Loader 配置: https://github.com/be5invis/vscode-custom-css#getting-started [5]
Linux 透明窗口: https://github.com/sergei-dyshel/vscode/blob/master/README.fork.md