如何配置透明發光的騷氣 vscode —— Jinkey 原創

原文連接 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 內置的終端透明

終端光標顏色修改，由@manonloki 提供

.panel.integrated-terminal .xterm-cursor,
.xterm-cursor-block {
  background: rgb(210, 0, 252) !important;
}

複製代碼

4 修改 VSCode 配置文件

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

5 重加載

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

部分電腦提示 reload 失敗的，請以管理員模式運動 vscode

sudo code --user-data-dir="~/.vscode-root"
複製代碼

6 總結

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

以上教程是基於 MacOS 的，Linux 用戶如何開啓透明請參考；Windows 的electron暫不支持vibrancy模式，能夠使用插件 GlassIt-VSC 設置透明。

Custom CSS and JS Loader 配置

Linux 透明窗口

Windows 只能透明 + 發光

1、安裝插件：

1.SynthWave '84

2.Custom CSS and JS

3.GlassIt-VSC

2、下載配置文件(兩個方法二選一)：

1.git命令安裝 git clone github.com/Jinkeycode/…

2.瀏覽器訪問 codeload.github.com/Jinkeycode/…

3、修改vscode的配置文件setting.json(在setting.json文件中加入下面代碼):

"vscode_custom_css.imports":[
        "file:///C:/Users/Administrator/AppData/Roaming/Code/User/vscode-transparent-glow-master/synthwave84.css",
    ]
複製代碼

"C:/Users/Administrator/AppData/Roaming/Code/User/vscode-transparent-glow-master/"這個替換成你步驟二中下載到的文件所在位置

4、使配置生效 按下 Ctrl + Shift + P，運行 "Reload Custom CSS and JS", 重啓 vscode 便可。