VScode 编辑器美化

VScode 编辑器美化

VScode 开启毛玻璃效果以及霓虹主题

效果:

preview

毛玻璃

必要插件

首先安装 vscode-custom-css

vscode-custom-css

样式配置

在一个不会移动的位置新建文件:

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
html {
background: transparent !important;
}

.scroll-decoration {
box-shadow: none !important;
}

.minimap {
opacity: 0.6;
}

.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;
}

.editor-group-container>.tabs .tab {
background-color: transparent !important;
}

.editor-group-container>.tabs .tab.active {
background-color: rgba(37, 37, 37,0.4) !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;
}

.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;
}

custom.js

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

vscode 设置

在 vscode 的设置中添加:

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

vscode 命令

vscode 中执行命令:

1
Reload Custom CSS and JS

附 更漂亮的 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
: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;
}

关键字高亮主题

必要插件

首先需要下载 synthwave-vscode

vscode 设置

安装上述主题后,在 setting.json 里面加

1
"terminal.integrated.rendererType": "dom"

追加样式

在 custom.css 加

1
2
3
4
.panel.integrated-terminal,
.panel.integrated-terminal *{
background: transparent !important;
}

参考

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×