修改VSCode的主题颜色为护眼绿

最近迷上了VSCode,一款可塑性极高的IDE。

VSCode有特别多的精美主题,推荐两款我喜欢的主题。

暗色主题:One Dark Pro

亮色主题:Atom One Light

就在昨天突发奇想,每天几乎4-6个小时的时间是花在IDE上的,为何不使用一款护眼的主题呢(虽然暗色主题真的B格很高),在官网+Google找了许久,尽然没有一款护眼绿的主题,我悲~

第一个想法就是动手写一个主题,于是Google了下,发现有个在线编辑主题的网站:tmThemeEditor,转念又一想,我其实只是想改下背景色,最好是能在某个喜欢的主题的基础上做一下简单的继承修改,于是找了找One Dark Pro的源码,发现主题竟然就是个Json文件这么简单,但是tmThemeEditor只能下载为tmTheme格式的xml文件,这种情况看来在线制作一个新的主题不但耗费精力,而且没法改为Json格式使用啊(tmTheme应该是古老的主题写法)。

继续Google修改VSCode文字颜色的方法,终于发现了新大陆,在User Settings中增加如下代码,即可修改文字前景色

1
2
3
"workbench.colorCustomizations": {
"foreground": "#75a478",
}

或者针对某个主题做修改

1
2
3
4
5
"workbench.colorCustomizations": {
"[Atom One Light]": {
"foreground": "#75a478",
}
}

简直神技啊,这么简单,那再改下背景色试试

1
2
3
4
5
6
"workbench.colorCustomizations": {
"[Atom One Light]": {
"foreground": "#75a478",
"editor.background": "#c8e6c9",
},
},

上边两个颜色都是GoogleMaterial Design颜色,这下终于完美了,VSCode我真的没白疼你啊,再附上官网主题颜色文档:Theme Color Reference,想改哪里都可以。

注意修改的时候建议使用亮色主题为基础,不然颜色差异会非常大。

最后附上我Material Design版的精修结果:

精修成果护眼绿

全部粘贴到配置文件后会有修改项的备注颜色的提示,非常方便修改:

修改项提示和颜色提示

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
100
101
102
103
104
"workbench.colorCustomizations": {
"[Atom One Light]": {
"foreground": "#519657",
"editor.background": "#c8e6c9",
"editor.lineHighlightBackground": "#dcedc8",
"editor.selectionBackground":"#f0f4c3",
"editorWidget.background": "#c8e6c9",
"editorHoverWidget.background":"#c8e6c9",
"editorHoverWidget.border":"#a5d6a7",
"editorLineNumber.foreground": "#a5d6a7",
"editorWhitespace.foreground": "#a5d6a7",
"editorSuggestWidget.background": "#c8e6c9",
"editorSuggestWidget.border":"#a5d6a7",
"editorSuggestWidget.foreground": "#338a3e",
"editorSuggestWidget.highlightForeground": "#338a3e",
"editorSuggestWidget.selectedBackground": "#a5d6a7",
"activityBar.background": "#c8e6c9",
"activityBar.foreground": "#519657",
"activityBarBadge.background": "#519657",
"activityBarBadge.foreground": "#FFFFFF",
"editorLineNumber.activeForeground": "#519657",
"input.background": "#c8e6c9",
"input.border": "#c5e1a5",
"focusBorder": "#c5e1a5",
"sideBar.background": "#c8e6c9",
"sideBarSectionHeader.background": "#c8e6c9",
"tab.activeBackground": "#c8e6c9",
"tab.activeForeground": "#519657",
"tab.inactiveBackground": "#c8e6c9",
"tab.inactiveForeground": "#97b498",
"tab.border": "#c8e6c9",
"badge.background": "#519657",
"statusBar.background": "#c8e6c9",
"statusBar.foreground": "#519657",
"statusBarItem.hoverBackground": "#dcedc8",
"statusBar.noFolderBackground": "#519657",
"statusBar.debuggingBackground": "#519657",
"statusBar.debuggingForeground": "#00701a",
"debugToolBar.background": "#a5d6a7",
"editorGroupHeader.tabsBackground": "#c8e6c9",
"button.background": "#519657",
"button.foreground": "#FFFFFF",
"button.hoverBackground": "#519657",
"extensionButton.prominentBackground": "#3BBA54",
"extensionButton.prominentHoverBackground": "#4CC263",
"scrollbar.shadow":"#a5d6a7",
"scrollbarSlider.background":"#a5d6a7",
"scrollbarSlider.hoverBackground":"#81c784",
"scrollbarSlider.activeBackground":"#81c784",
"list.activeSelectionBackground":"#dcedc8",
"list.activeSelectionForeground":"#519657",
"list.inactiveSelectionBackground":"#dcedc8",
"list.inactiveSelectionForeground":"#519657",
"list.hoverBackground":"#dcedc8",
"list.highlightForeground":"#dcedc8",
"dropdown.background":"#c8e6c9",
"dropdown.border":"#c5e1a5",
"titleBar.activeBackground": "#c8e6c9",
"titleBar.activeForeground": "#519657",
"titleBar.inactiveBackground": "#c8e6c9",
"titleBar.inactiveForeground": "#519657"
},
},
"editor.tokenColorCustomizations": {
"[Atom One Light]":{
"textMateRules":[
{
"name": "Comment",
"scope": [
"comment"
],
"settings": {
"foreground": "#97b498",
"fontStyle": ""
}
},
{
"name": "String",
"scope": [
"string"
],
"settings": {
"foreground": "#338a3e"
}
},
{
"name": "Variable",
"scope": [
"variable"
],
"settings": {
"foreground": "#c51162"
}
},
{
"name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition",
"scope": "punctuation.definition.variable.php",
"settings": {
"foreground": "#c51162"
}
},
]
}
},

Enjoy~

千万不要给我打赏!千万不要给我打赏!千万不要给我打赏!