前言

本文參考的是Jinkey大神的原創文章如何配置透明發光的騷氣 vscode —— Jinkey 原創。本文中目錄結構與原創中大同小異，但加上了一些自己的理解和新手用Mac的一些快捷鍵提示，以及如何給Vscode 加上背景圖片。產權無價，支持原創。

What do I want ?

Is this...

image

image

This is too cool !??

1. 在vscode上安裝自定義JS和CSS的插件

在vscode的擴展頁面搜索下載以下插件

Custom CSS and JS Loader

image

2. 安裝vscode發光主題

SynthWave '84

image

3. 下載相關的vscode樣式

完成上述兩個步驟之后，我們可以自定義一些樣式使我們的vscode看上去更加酷炫。
首先要在你電腦的本地上選擇一個文件目錄用來放你的自定義JS和CSS文件。
一般可以就放在vscode的安裝文件夾下，或者自己找得到的文件夾下。
我這里為了配置方便，定義了一個config文件夾專門存放一些配置文件。
并在config中創建一個名為vscode-transparent-theme的文件夾，將以下配置文件放入其中。
配置文件直接要感謝Jinkey大神整理好的配置，下載地址:https://github.com/Jinkeycode/vscode-transparent-glow
將下載下來的文件放入相應的文件夾下：

image

各個文件的作用這里就不一一做介紹了，大概的作用就是能改變vscode本身的一些樣式，以及代碼文字的樣式等等...

4. 修改vscode的相關配置

打開vscode的setting.json文件，這個文件可以在左下角的設置中找到，用來配置用戶的自定義屬性。

image

打開之后，將以下內容全部復制到setting.json中：

{
   "vscode_custom_css.imports": [
        "file:///Users/lindaidai/config/vscode-transparent-theme/vscode-vibrancy-style.css",
        "file:///Users/lindaidai/config/vscode-transparent-theme/synthwave84-noglow.css",
        "file:///Users/lindaidai/config/vscode-transparent-theme/toolbar.css",
        "file:///Users/lindaidai/config/vscode-transparent-theme/terminal.css",
        "file:///Users/lindaidai/config/vscode-transparent-theme/enable-electron-vibrancy.js"
    ],
    "vscode_custom_css.policy": true,
    "terminal.integrated.rendererType": "dom",
    "workbench.colorTheme": "SynthWave '84",
}

file:///Users/lindaidai/config/vscode-transparent-theme就是你存放這些配置文件的絕對路徑。
MacOS 上獲取文件夾或者文件的路徑快捷鍵：

Option+Command+C

選中你的文件夾然后使用上面的快捷鍵，文件夾的路徑就復制到了你的粘貼板上了。
例如我這里就是/Users/lindaidai/config/vscode-transparent-theme
file:// 這個前綴記得加上。

若是你的setting.json中原本就有配置內容的話，比如有設置vscode字體大小的配置：

{
  "editor.fontSize": 16
}

那就直接在它下面加上配置就行了，如下：

{
  "editor.fontSize": 16,
  "vscode_custom_css.imports": [...],
  ...
}

5. 重新加載vscode

配置保存好上面的setting.json之后，需要重新加載vscode才能看到效果。
按下 Ctrl + Shift + P(MacOS下為Shift+commoand+P)，運行 "Reload Custom CSS and JS", 重啟 vscode 即可。如果提示VSCode 已經損壞，選擇右上角齒輪“不再提示”即可。
部分電腦提示 reload 失敗的，請以管理員模式運動 vscode

sudo code --user-data-dir="~/.vscode-root"

最終看到的效果和配置就是這樣：

image

editor.tokenColorCustomizations那個配置是我看成功之后注釋的字體顏色太淡了，很難看清，所以加的配置。comments代表的就是配置注釋的字體顏色，這個可以自己發揮。

6. 安裝背景插件

完成上面的步驟就已經實現了你的vscode透明發光的效果了，要是還想再炫一點的話，要不給它加個背景圖？
安裝以下背景插件

background

image

安裝成功之后重新加載vscode就可以看到右下角有一個默認的背景圖片。
當然你也可以把vscode整體想象成一個div元素，然后給這個元素配置上背景圖片的樣式。
并且自定義背景圖片，如我的setting.json配置：

{
    "editor.fontSize": 16,
    "editor.tokenColorCustomizations": {
        "comments": "#72777b"
    },
    "vscode_custom_css.imports": [
        "file:///Users/lindaidai/config/vscode-transparent-theme/vscode-vibrancy-style.css",
        "file:///Users/lindaidai/config/vscode-transparent-theme/synthwave84-noglow.css",
        "file:///Users/lindaidai/config/vscode-transparent-theme/toolbar.css",
        "file:///Users/lindaidai/config/vscode-transparent-theme/terminal.css",
        "file:///Users/lindaidai/config/vscode-transparent-theme/enable-electron-vibrancy.js"
    ],
    "vscode_custom_css.policy": true,
    "terminal.integrated.rendererType": "dom",
    "workbench.colorTheme": "SynthWave '84",
    "material-icon-theme.activeIconPack": "vue",
    "background.customImages": [
        "file:///Users/lindaidai/config/vscode-background-image/timg3.png"
    ],
    "background.style": {
        "content":"''",
        "pointer-events":"none",
        "position":"absolute",//圖片位置
        "width":"100%",
        "height":"100%",
        "z-index":"99999",
        "background.repeat":"no-repeat",
        "background-size":"25%, 25%",//圖片大小
        "opacity":0.2 //透明度
    },
    "background.useFront": true,
    "background.useDefault": false //是否使用默認圖片
}

background.customImages 就是你自定義背景圖片的絕對路徑，它是一個數組，最多支持3張背景圖片。
背景圖片的樣式可以在background.style中配置。
最終效果：

image

注意

以上教程是基于 MacOS 的；Windows 的electron暫不支持vibrancy模式，可以使用插件 GlassIt-VSC 設置透明。

Custom CSS and JS Loader 配置

Linux 透明窗口

后記

參考資料：
如何配置透明發光的騷氣 vscode —— Jinkey 原創