如何配置透明發光的騷氣 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。css

enable-electron-vibrancy.js
開啓 electron 透明支持
git

vscode-vibrancy-style.css
github

synthwave84.css
文字發光樣式,樣式請在 Github 獲取。若是要不發光的,能夠使用 synthwave84-noglow.css。能夠 watch https://github.com/robb0wen/synthwave-vscode 保持更新通知。json

toolbar.css
引入以上大神的樣式配置以後,左邊導航欄有部分標題仍是未透明狀態,我本身修改了配置,引入便可。
微信

4 修改 VSCode 配置文件


點擊上圖 在 setting.json 中編輯,打開後加入配置(不須要大括號,直接把 key-value 加入原有 json 便可):
setting.jsonelectron

5 重加載

按下 Ctrl + Shift + P,運行 "Reload Custom CSS and JS", 重啓 vscode 便可。若是提示VSCode 已經損壞,選擇右上角齒輪「再也不提示」便可。post

6 總結

成品效果如圖,不懂的能夠加小助手微信 udujjb 拉你進羣詢問
spa

以上教程是基於 MacOS 的,Linux 用戶如何開啓透明請參考,Windows 的electron暫不支持vibrancy模式。
Custom CSS and JS Loader 配置
Linux 透明窗口插件

相關文章
相關標籤/搜索