VSCode真的是一款強大的程式設計軟體：它擁有眾多型別的擴充套件和第三方庫以及支援眾多程式語言。在搭建並配置部落格的過程中，本地靜態部落格的配置檔案比如.yml.json.css.swig等各種格式的檔案都可以用它開啟並修改。如果它擁有一個更為漂亮簡潔的UI介面，那勢必會使生產力翻倍了！!! 本文介紹如何實現VS Code介面的毛玻璃效果~

毛玻璃效果❌以及霓虹主題✅介面效果：

霓虹主題：程式碼高亮且呈現彩虹色?

毛玻璃效果：介面半透明狀態 –> 類似於模糊桌面背景

霓虹主題效果：

毛玻璃效果

操作步驟：

安裝Visual Studio Code，點?就是我呀！安裝！?

下載「關鍵字高亮」主題外掛

開啟VS Code在extension擴充套件欄裡搜尋並下載擴充套件應用“Synthwave ‘86”

VS Code設定

在設定中搜尋setting.json並在該檔案中新增如下程式碼：

terminal.integrated.rendererType": "dom"

下載Custom CSS and JS Loader外掛

用於自定義.css和.js檔案

開啟VS Code在extension擴充套件欄裡搜尋並下載擴充套件應用“Custom CSS and JS Loader”

毛玻璃樣式配置

新建custom.css檔案：

:root{

--vibrancy-dark: rgba(0,0,0,.2);

--vibrancy-light: rgba(255,255,255,.2);

}

html {

background: transparent !important;

}

.scroll-decoration {

box-shadow: none !important;

}

.minimap {

opacity: 0.6;

background-color: transparent !important;

}

.editor-container {

background: transparent !important;

}

.search-view .search-widget .input-box, .search-view .search-widget .input-box .monaco-inputbox,

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab,

.monaco-editor-background,

.monaco-editor .margin,

.monaco-workbench>.part>.content,

.monaco-workbench>.editor>.content>.one-editor-silo.editor-one,

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title,

.monaco-workbench>.part>.title,

.monaco-workbench,

.monaco-workbench>.part,

body {

background: transparent !important;

}

.editor-group-container>.tabs {

/* background-color: rgba(37, 37, 37,0.2) !important; */

background: transparent !important;

/* box-shadow: 0 1px 10px -2px gray; */

}

.editor-group-container>.tabs .tab {

background-color: transparent !important;

}

.editor-group-container>.tabs .tab.active * {

color: #fff !important;

background-color: transparent !important;

}

.monaco-list.settings-toc-tree .monaco-list-row.focused {

outline-color: rgb(37, 37, 37,0.6) !important;

}

.monaco-list.settings-toc-tree .monaco-list-row.selected,

.monaco-list.settings-toc-tree .monaco-list-row.focused,

.monaco-list .monaco-list-row.selected,

.monaco-list.settings-toc-tree:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {

/* background-color: rgb(37, 37, 37,0.6) !important; */

color: #00aaee;

}

.monaco-list.settings-editor-tree .monaco-list-row {

background-color: transparent !important;

outline-color: transparent !important;

}

.monaco-inputbox {

background-color: rgba(41, 41, 41,0.2) !important;

}

.monaco-editor .selected-text {

background-color: rgba(58, 61, 65,0.6) !important;

}

.monaco-editor .focused .selected-text {

background-color: rgba(38, 79, 120,0.6) !important;

}

.monaco-editor .view-overlays .current-line {

border-color: rgba(41, 41, 41,0.2) !important;

}

.extension-editor,

.monaco-inputbox>.wrapper>.input,

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active,

.preferences-editor>.preferences-header,

.preferences-editor>.preferences-editors-container.side-by-side-preferences-editor .preferences-header-container,

.monaco-editor, .monaco-editor .inputarea.ime-input {

background: transparent !important;

}

.editor-group-container>.tabs .tab {

border: none !important;

}

.panel.integrated-terminal,

.panel.integrated-terminal *{

background: transparent !important;

}

新建custom.js檔案

nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');

VS Code設定

在setting.json中新增如下程式碼：

"vscode_custom_css.imports": [

"file:///Users/MyUserName/Documents/custom.css",//注意確定好檔案路徑

"file:///Users/MyUserName/Documents/custom.js"  //注意確定好檔案路徑

],

"vscode_custom_css.policy": true

執行配置操作

在VS Code中執行命令（Commond+Shift+P）：

Reload Custom CSS and JS

然後在右下角彈出的對話方塊裡選擇Restart Visual Studio Code。

目前經過多次嘗試，設定霓虹主題成功但開啟毛玻璃效果失敗：在以上所有操作結束後應該 出現正確效果，但我的介面彈出Code已損壞請重新下載。注意！！！Mac OS端可以實現以上效果，Windows端不可以。