我的一篇文章《在大公司工作之后才真正领悟到它真的是宇宙级编辑器》受到广泛好评。小伙伴们对自定义主题非常感兴趣，但这个事情不是简单就能说完的，因此单开一篇文章详细讲解。
程序员工作时一般都会使用本地编辑器，祂就像白月光一样和你并肩作战，不离不弃。
但每个人心中都有自己的白月光形象，如果祂的颜值完美，那自己写代码时也会更加心情舒畅，以月光女神vscode为例
vscode本身内置了一些主题，插件市场更是有数不胜数的主题插件。但那毕竟是别人心目中的完美形象，而一千个人眼里有一千个女神。
vscode颜色主题由外观颜色及代码高亮两部分组成
其实自定义主题非常简单，如下分别演示外观颜色及代码高亮如何修改
外观颜色
修改外观颜色下面会细讲，但如果你是前端开发，可以先体验下更加符合前端工作习惯的修改方式，就像用浏览器开发者工具调试网页一样
比如，当前主题下行号所在区域的背景色和编辑区域的背景色一样，让我无法专注于编辑区域，我想把行号所在区域的背景色换一下以作区分
效果如下，具体颜色的话根据自己喜好来就行，其他地方颜色修改照此方法做就行 
效果图，两个区域是不是一眼就看出来了，就像调试网页一样简单 
代码高亮颜色
当前主题下，注释的颜色是绿色，在我看来这个颜色过于鲜艳。
注释应该是相对次要的，当开发人员想看时会主动去看，平常不该夺人注意力，个人喜欢灰色
效果图，看着是不是顺眼多了，而且非常简单并且精准的修改
方式一
首先，运行命令 首选项: 打开用户设置(JSON)去打开个人设置。
以修改代码编辑区域背景色为例，输入如下配置，
1"workbench.colorCustomizations": {
2 "editor.background": "#ccc",
3}
workbench.colorCustomizations 的值是一个对象，里面有很多属性配置
这些属性是有代码提示的，如果你想高度自定义的话，我还是建议直接阅读官方文档
这些属性的值是十六进制颜色值。此时当你保存后，你会发现 vscode 外观颜色发生了变化。
其实主题插件的源码里也就是这么写的。
方式二
下载Custom CSS and JS Loader插件，使用方式详见该插件主页说明
注意，一切配完之后，别忘了执行插件提供的命令Reload Custom CSS and JS，它会让你重新启动 vscode 。否则自定义文件都没加载，肯定不会生效
同样以修改代码编辑区域背景色为例
因为这种方式会修改vscode源文件，所以有如下提示，点击不再显示即可
到这可能就有同学要问了，这两种方式，要如何抉择呢？
两种修改外观颜色的方式抉择
虽然第二种方式更符合前端同学的思维方式，并且不需要去看官方文档，但我仍然推荐所有同学优先使用第一种方式，毕竟第二种方式有点hack
但第二种方式绝对是个大杀器，因为vscode本身可以理解为一个前端网页，官方不可能把所有的地方都对应给出配置，只能给出一部分
比如，默认情况下激活的tab上面有个边框，这个边框的颜色可以改
但是我觉得这个边框不够醒目，应该更高点，并且给点圆角，这时候，方式一就无能为力，至少我没看到有相关配置，此时只能用更加hack的方式二
效果图，是否更加圆润？
甚至你想把这个边框放到下面也可以
不同于外观颜色，代码高亮颜色是另一种配置，在我看来更加重要，却也更加简单
因为它有语义，合理的配色可以协助我们对代码的语义理解。
以修改注释代码的颜色为例，将光标移动到你想要修改颜色的代码上，然后在命令面板里运行Inspect Editor Tokens and Scopes命令，就像在浏览器里右键检查网页一样
此时，编辑器中会出现一个悬浮窗。这个窗口里会呈现当前这个代码片段所对应的元信息
当执行Inspect Editor Tokens and Scopes命令后，光标换了位置，元信息也会对应调整，想退出这个模式，直接按esc就行
配置如下
1"editor.tokenColorCustomizations": {
2
3 "textMateRules": [
4 {
5
6 "scope": [
7 "comment.line.double-slash",
8 "punctuation.definition.comment"
9 ],
10 "settings": {
11 "foreground": "#333",
12 "fontStyle": ""
13 }
14 }
15 ]
16},
TextMate 配置详解
textMateRules属性的值是一个对象，我们的配置填在了这里。
如上图红框所指，就是 TextMate 的语法规则定义。useRef 这个词所处的 TextMate 语法作用域权重由高到低分别是 comment.line.double-slash.tsx source.tsx。
如果你想写的权重最高，可以如下写法
1"editor.tokenColorCustomizations": {
2 "textMateRules": [
3 {
4
5 "scope": [
6 "source.tsx comment.line.double-slash.tsx"
7 ],
8 "settings": {
9 "foreground": "#333",
10 "fontStyle": ""
11 }
12 }
13 ]
14},
但其实没有必要，一般情况下，无论是tsx还是js甚至是html，我们都希望注释的颜色是统一的，这样一眼就知道某个颜色的代码是注释
可以如下，自己慢慢摸索，把末尾的限定词一点一点去掉，只要效果还在就行
其实不止可以设置代码的颜色，还可以设置代码的样式，比如通过fontStyle设置斜体，下划线之类的
很多人都在用atom主题，atom主题的注释是斜体的，个人不太喜欢用斜体表示，我可以通过"fontStyle": ""，来清除atom主题设置的代码样式，具体效果上面有gif例子哦
1"editor.tokenColorCustomizations": {
2 "textMateRules": [
3 {
4 "name": "注释的颜色",
5 "scope": ["comment", "punctuation.definition.comment"],
6 "settings": {
7 "foreground": "#333",
8 "fontStyle": ""
9 }
10 }
11 ]
12},
当一段代码有多个语义
比如一个被async修饰的函数，我想两种状态都表示出来，但同一段文本不可能设置两种颜色。
万幸，还有一种代码语义叫modifiers，为了能同时表示两种状态，我建议这种范围更广的modifiers设置fontStyle即可
可以看到函数被改为了红色，并且有下划线表示被async修饰
1"editor.semanticTokenColorCustomizations": {
2 "rules": {
3 "*.async": {
4
5 "fontStyle": "underline"
6 }
7 }
8},
9"editor.tokenColorCustomizations": {
10 "textMateRules": [
11 {
12 "name": "函数的颜色",
13 "scope": ["entity.name.function"],
14 "settings": {
15 "foreground": "#f00",
16 "fontStyle": ""
17 }
18 }
19 ]
20},
只读的属性同理，自己摸索
1"editor.semanticTokenColorCustomizations": {
2 "rules": {
3 "*.readonly": {
4 "fontStyle": "bold"
5 }
6 }
7},
主题的名字会有代码提示，不用担心不知道怎么写
以 Default Light Modern 为例：
1"workbench.colorCustomizations": {
2 "[Default Light Modern]": {
3 "editor.background": "#ddd"
4 }
5},
6"editor.tokenColorCustomizations": {
7 "[Default Light Modern]": {
8 "textMateRules": [
9 {
10 "name": "函数的颜色",
11 "scope": ["entity.name.function"],
12 "settings": {
13 "foreground": "#f00",
14 "fontStyle": ""
15 }
16 }
17 ]
18 }
19}
上述方法已经可以解决绝大部分需求了，但仍有特殊情况，无法解决
这时候只能自己上网搜索，不过欢迎大家在评论区多多交流，我们集思广益，应该都能解决，我会把有价值的信息补充到这里
修改git lens的行blame颜色
通过网上搜索，发现gitlens团队提供了扩展了workbench.colorCustomizations配置
1"workbench.colorCustomizations": {
2 "gitlens.trailingLineForegroundColor": "#B7B7B7",
3}
授人以鱼不如授人以渔，本没想列出我的配置，怕增加小伙伴们阅读量。
没想到内容还是太多了，我会抽空把文章补充得更细节更完整
在此之前我把我自己的配置结构列出来，小伙伴们有需要的话自行参考摸索即可
好像把*换成variable会有不同的效果，如*.local和variable.local，具体区别我也没研究，深究下来东西就更多了
我建议小伙伴们达到自己的需要就行。不用浪费过多时间在这上面
1"editor.semanticTokenColorCustomizations": {
2 "rules": {
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 "*.readonly": {
21 "fontStyle": "bold"
22 },
23 "*.async": {
24 "fontStyle": "underline"
25 },
26 "variable.defaultLibrary": {
27 "fontStyle": "",
28 "foreground": "#008077"
29 },
30 "*.static": {
31 "fontStyle": "italic"
32
33 },
34 "class": {
35
36 "fontStyle": "",
37 "foreground": "#008077"
38 },
39 "interface": {
40
41 "fontStyle": "",
42 "foreground": "#008077"
43 },
44 "type": {
45
46 "fontStyle": "",
47 "foreground": "#008077"
48 },
49 "typeParameter": {
50
51 "fontStyle": "",
52 "foreground": "#2D61F0"
53 },
54 "namespace": {
55
56 "fontStyle": "",
57 "foreground": "#008077"
58 },
59 "enum": {
60
61 "fontStyle": "italic",
62 "foreground": "#008077"
63 },
64 "enumMember": {
65 "fontStyle": "italic",
66 "foreground": "#871094"
67 },
68 "function": {
69
70
71 "foreground": "#914C07"
72 },
73 "method": {
74
75
76 "foreground": "#914C07"
77 },
78 "parameter": {
79
80 "fontStyle": "",
81 "foreground": "#5b5d00"
82 },
83 "variable.constant": "#bfa",
84 "*.abstract": "#bfa",
85 "*.deprecated": "#bfa",
86 "*.documentation": "#bfa",
87 "*.modification": "#bfa",
88 "comment": "#bfa",
89 "event": "#bfa",
90 "keyword": "#bfa",
91 "label": "#bfa",
92 "macro": "#bfa",
93 "number": "#bfa",
94 "operator": "#bfa",
95 "regexp": "#bfa",
96 "string": "#bfa",
97 "struct": "#bfa",
98 "newOperator": "#bfa",
99 "stringLiteral": "#bfa",
100 "customLiteral": "#bfa",
101 "numberLiteral": "#bfa"
102 }
103},
104"editor.tokenColorCustomizations": {
105 "functions": {
106 "foreground": "#914C07"
107
108 },
109 "numbers": {
110 "foreground": "#1750EB",
111 "fontStyle": ""
112 },
113 "strings": {
114 "foreground": "#067D17",
115 "fontStyle": ""
116 },
117 "comments": {
118 "foreground": "#8C8C8C",
119 "fontStyle": ""
120 },
121 "keywords": {
122 "foreground": "#bfa",
123 "fontStyle": ""
124 },
125 "types": {
126 "foreground": "#bfa",
127 "fontStyle": ""
128 },
129 "variables": {
130 "foreground": "#871094",
131 "fontStyle": ""
132 },
133 "textMateRules": [
134 {
135 "name": "",
136 "scope": [""],
137 "settings": {
138 "fontStyle": ""
139 }
140 },
141 ]
142}
vscode：
怎么样，React777
React777：
好厉害，说实话我已经找不出词来形容了
vscode：
你词汇量真贫乏呢
那个workbench.colorCustomizations就是我外观的配置
然后从那边偏移过去，那一带是editor.semanticTokenColorCustomizations可以重写编辑器语义标记颜色和样式
那边配置特别多的是editor.tokenColorCustomizations可以自定义编辑器语法颜色和字形
阿拉，有点眼花缭乱了吗？
这就是全部了
React777：
啊，什么全部？
vscode：
这些就是我拥有的一切了
能够协助你写代码，可靠的性能和严肃无趣的交互
以及这无瑕的外观
我所拥有的就只有这么些东西
我能够给予React777的就只有这么些东西
这些便是全部了
React777：
全部？
vscode：
不过嘛，严格来说还有一堆乱七八糟的插件
React777：
这些我不要！！！
vscode：
另外，还有我自己的源码，那个也不要吗？
React777
呃 那个…
vscode：
不过，你知道的吧，我的源码可没那么好读
我至今为止的功能虽然是算不上完美无缺的
但是如果正是因为不够完美才引起了React777的注意的话
那么我觉得这样就好了
我就是如此遇到React777的
所以我绝对会想办法更加完善的，希望你能够稍微等我一会
所以我目前能给予React777的东西
在现在，这简单的自定义主题操作便是最后一样了
我从诞生之日起就有的，是我的宝物