实现Visual Studio Code界面毛玻璃效果

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 4k | 阅读时长 ≈ 4 分钟

VSCode真的是一款强大的编程软件：它拥有众多类型的扩展和第三方库以及支持众多编程语言。在搭建并配置博客的过程中，本地静态博客的配置文件比如.yml.json.css.swig等各种格式的文件都可以用它打开并修改。如果它拥有一个更为漂亮简洁的UI界面，那势必会使生产力翻倍了！所以当我网上冲浪🏄并留意到美化VS Code界面的关键词时…!!! 本文介绍如何实现VS Code界面的毛玻璃效果~

毛玻璃效果❌以及霓虹主题✅界面效果：

霓虹主题：代码高亮且呈现彩虹色🌈
毛玻璃效果：界面半透明状态 –> 类似于模糊桌面背景

霓虹主题效果：

毛玻璃效果

操作步骤

下载「关键字高亮」主题插件

打开VS Code在extension扩展栏里搜索并下载扩展应用“Synthwave ‘86”

VS Code设置

在设置中搜索setting.json并在该文件中添加如下代码：

1
terminal.integrated.rendererType": "dom"

下载Custom CSS and JS Loader插件

用于自定义.css和.js文件

打开VS Code在extension扩展栏里搜索并下载扩展应用“Custom CSS and JS Loader”

毛玻璃样式配置

新建custom.css文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
: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文件
1
nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');
VS Code设置

在setting.json中添加如下代码：

1
2
3
4
5
"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）：

1
Reload Custom CSS and JS

然后在右下角弹出的对话框里选择Restart Visual Studio Code。

⚠️目前经过多次尝试，设置霓虹主题成功但开启毛玻璃效果失败：在以上所有操作结束后应该 出现正确效果，但我的界面弹出Code已损坏请重新下载。
🚫注意！！！Mac OS端可以实现以上效果，Windows端不可以。