如何配置透明发光的骚气 vscode —— Jinkey 原创

原文链接 https://jinkey.ai/post/tech/ru-he-pei-zhi-tou-ming-fa-guang-de-sao-qi-vscode
转载请注明出处

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 https://github.com/robb0wen/synthwave-vscode 保持更新通知。

toolbar.css
引入以上大神的样式配置之后,左边导航栏有部分标题还是未透明状态,我自己修改了配置,引入即可。

terminal.css
使 vscode 内置的终端透明

4 修改 VSCode 配置文件


点击上图 在 setting.json 中编辑,打开后加入配置(不需要大括号,直接把 key-value 加入原有 json 即可):
setting.json

5 重加载

按下 Ctrl + Shift + P,运行 "Reload Custom CSS and JS", 重启 vscode 即可。如果提示VSCode 已经损坏,选择右上角齿轮“不再提示”即可。

6 总结

成品效果如图,不懂的可以加小助手微信 udujjb 拉你进群询问


以上教程是基于 MacOS 的,Linux 用户如何开启透明请参考;Windows 的electron暂不支持vibrancy模式,可以使用插件 GlassIt-VSC 设置透明。

Custom CSS and JS Loader 配置

Linux 透明窗口

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容