# 28讲如何深度定制自己的主题
<br>
:-: 
<br>
前面我们在“工作区”模块中介绍过，如何通过快捷键快速地隐藏和显示 VS Code 的某个 UI 组件，比如隐藏状态栏、活动栏、侧边栏等等。但是如何固定住某个 UI 组件，以及如何修改各个 UI 组件的颜色、边框等等，我们都还没有涉及，今天我们将逐一介绍。
<br>
## 固定 UI 视图
<br>
首先我们可以做的，就是持久化 UI 视图，这句话是什么意思呢？VS Code 的各种 “切换 xyz 视图可见性” 的命令，它**最终都是将这个配置写到了你的个人设置中**。比如说，我们运行 “切换状态栏可见性”（Toggle Status Bar Visibility），然后再打开个人设置 （JSON），我们可以在设置中找到这样一条：
<br>
~~~
"workbench.statusBar.visible": false,
~~~
<br>
这个配置也非常好理解，它是表达：statusBar（状态栏）并不是 visibile （可见）的。
<br>
再比如，你可以将侧边栏显示在右侧，像 Visual Studio 里那样，你可以运行 “切换边栏位置”（Toggle Side Bar Position）。
<br>
:-: 
<br>
:-: 切换侧边栏位置
<br>
完成这样的命令后，个人设置里就会多出下面这条设置：
<br>
~~~
"workbench.sideBar.location": "right"
~~~
<br>
还有就是搜索视图的位置，你可以运行“切换搜索视图位置”命令。
<br>
:-: 
<br>
:-: 切换搜索视图位置
<br>
VS Code 就会在设置里添加如下代码：
<br>
~~~
"search.location": "panel"
~~~
<br>
相信通过这三个例子，你就可以了解如何在你的不同设备之间共享 UI 设置了。通过设置来控制 UI 最棒的地方在于，你**可以为不同的项目指定不同的设置**。比如你可以在自己的个人设置里，将状态栏、侧边栏等都隐藏，这样当你打开一个新窗口时，或者只是编辑单个文件时，你不需要用到它们，自然也就不需要显示它们。而当你打开了某个项目时，可以由这个项目的情况来决定是否要将它们打开。比如说这个项目用了 Git，那么将侧边栏展示出来可能会更方便一些。
<br>
## 修改工作区配色
<br>
持久化 UI 视图设置是 VS Code 定制的第一步，而第二步就是修改工作区里各个视图的配色了。相信你早就在插件市场下载过各种主题然后使用了，但其实自己修改主题颜色也非常简单，甚至不要求你有任何的编程知识。
<br>
首先，运行命令 “打开设置（JSON）”去打开个人设置。
<br>
然后你在编辑器里输入 “workbench.colorCustomizations"，这时候，VS Code 的自动补全就会给你两个提示项了，第一个是：
<br>
~~~
{
"statusBar.background": "#666666",
"panel.background": "#555555",
"sideBar.background": "#444444"
}
~~~
<br>
第二个是 {} 。当你选择第一个提示项，此时这个配置是这样的：
<br>
~~~
"workbench.colorCustomizations": {
"statusBar.background": "#666666",
"panel.background": "#555555",
"sideBar.background": "#444444"
}
~~~
<br>
workbench.colorCustomizations 有很多属性，它们的键（key）就是代表着各个组件的属性，在示例里，它们是：
<br>
* statusBar.background，状态栏背景色
* panel.background，面板背景色
* sideBar.background，侧边栏背景色
<br>
而它们的值则是颜色的 HEX 值。此时当你保存文件后，你会发现 VS Code 发生了变化。
<br>
:-: 
<br>
:-: 修改工作区颜色
<br>
没错，上面提到的这三个组件的背景色都立刻发生了变化。而你在设置里添加的这三组键值（key-value pair），跟主题插件里的书写方式一模一样。
<br>
已经知道了去哪里书写这些颜色配置，下面就是要知道有哪些可以修改的值了。最简单的方式当然是通过自动补全。
<br>
:-: 
<br>
:-: 颜色修改自动补全
<br>
VS Code 自动补全列表提供了所有可以修改的颜色，而如果你希望对此有个全的了解再进行书写，你也可以阅读[官方文档](https://code.visualstudio.com/docs/getstarted/theme-color-reference)。
<br>
## 修改编辑器配色
<br>
除了工作区的配色，你也可以修改编辑器内代码的颜色。这个就真的强大了，因为为代码书写语法文件和配色文件，都是非常复杂的，但是在 VS Code 中，你依然有非常简单的方式去完成部分修改。
<br>
### 1、基本类型颜色修改
<br>
首先，你要做的，就是知道你想要修改的代码，是属于什么基本类型。你可以将光标移动到某段你想要修改颜色的代码上，比如将光标移动到一段字符串上，
<br>
:-: 
<br>
然后，在命令面板里运行 “检查TM作用域”（Inspect TM Scopes）命令。
<br>
:-: 
<br>
:-: Inspect TM Scopes
<br>
此时，编辑器中出现一个新的悬浮窗。这个窗口里呈现的，就是当前这个代码片段所对应的语言、语法类型以及当前的颜色和背景色等。
<br>
:-: 
<br>
:-: 语法信息
<br>
比如在上图里，这个窗口呈现了以下信息：
<br>
* 当前的 token 是 hello，它的类型是 String；
* 它的颜色是 #ce9178ff ，背景色是 #1e1e1eff；
* 它所属的语法作用域由内而外分别是 string.quoted.double.js，meta.var.expr.js，source.js。
<br>
如果你想要将所有字符串都变成红色，那么就需要修改String这个作用域的颜色。下面，你可以再次打开个人设置（JSON），输入 editor.tokenColorCustomizations；
<br>
:-: 
<br>
:-: 修改编辑器内代码颜色
<br>
然后把光标放入这个 JSON 对象中，按下 “Ctrl + Space” 触发建议列表，就能够看到如下的建议。
<br>
:-: 
<br>
:-: 编辑器颜色修改自动补全
<br>
建议列表中首先出现的，就是你可以在 VS Code 中使用的所有的主题的名字。通过选择它们，你可以只覆盖某个主题中的某个颜色。这里你可以滚动这个列表，看看下面还有别的什么建议。
<br>
:-: 
<br>
你可以看到如下几个选项：
<br>
* comments 代表着注释的颜色；
* functions 代表着函数的寒色；
* keywords 代表着关键字的颜色；
* numbers 代表着数字的颜色；
* strings 代表着字符串的颜色；
* types 代表着类型的颜色；
* variables 代表着变量的颜色；
* textMateRules 我下面会再介绍。
<br>
为了修改字符串的颜色，你只需选择 strings 即可，然后将其修改为红色，也就是：
<br>
~~~
"editor.tokenColorCustomizations": {
"strings": "#FF0000",
}
~~~
<br>
保存设置后，你再回到刚才的 JavaScript 文件时，就可以看到字符串颜色都变了。
<br>
:-: 
<br>
:-: 字符串颜色修改为红色
<br>
### 2、TextMate 规则修改
<br>
在上面的建议列表里，还有个 textMateRules选项，这个属性是做什么用的呢？让我们再来看下刚才在 JavaScript 文件里运行 “Inspect TM Scopes” 看到的信息。
<br>
:-: 
<br>
:-: 语法信息
<br>
在这个窗口的最下方，就是 TextMate 的语法规则作用域了。hello 这个词所处的 TextMate 语法作用域**由内而外**分别是 string.quoted.double.js，meta.var.expr.js，source.js。VS Code 的主题插件在配置编辑器内代码的颜色时，就是针对这些作用域进行设置的。而你要修改某个作用域所对应的颜色，就是在设置中修改 textMateRules 。
<br>
比如说，你只想修改双引号内的字符串的颜色为红色，其他的字符串都不修改，那么就需要修改 string.quoted.double.js 这个作用域的颜色。
<br>
:-: 
<br>
:-: textMateRules 模板
<br>
在上面的动图里， 你可以看到：输入引号，然后自动补全填入了 TextMate 语法设置的模板，这之后，再将 scope 的值修改成了 string.quoted.double.js 。保存设置后，当你再次打开之前的 JavaScript 文件，
<br>
:-: 
<br>
:-: 双引号内字符串为红色
<br>
“hello” 是红色的，但是如果你输入
<br>
~~~
var b = 'hello'
~~~
<br>
单引号内的 hello 依然是原来的颜色。
<br>
## 基于某个主题修改配色
<br>
上面我们提到了，当你自定义编辑器内配色时，自动补全给你提示了所有已经安装的主题。
<br>
:-: 
<br>
:-: 编辑器颜色修改自动补全
<br>
通过选择这些主题，你可以只针对它们做颜色修改，而不影响其他的主题的颜色。工作区的颜色修改也是如此。比如说，你想修改 Monokai 的某个颜色定义，那么你可以这么写：
<br>
~~~
"workbench.colorCustomizations": {
"[Monokai]": {
"statusBar.background": "#666666",
"panel.background": "#555555",
"sideBar.background": "#444444"
},
}
~~~
<br>
而相应的编辑器颜色修改则是：
<br>
~~~
"editor.tokenColorCustomizations": {
"[Monokai]": {
"strings": "#FF0000"
}
}
~~~
<br>
是不是非常方便呢？
<br>
## 取色器 Color Picker
<br>
在前面介绍 HTML、CSS 的功能时，我介绍过可以在 HTML 和 CSS 中使用取色器来修改颜色。同样的，在 JSON 文件中，你也可以使用取色器来修改。
<br>
:-: 
<br>
:-: 使用取色器修改颜色
<br>
在上图中，我因为开启了文件自动保存，设置文件会自动保存然后触发颜色的更新，所以当我使用取色器修改颜色后，稍等片刻，就能看到这个颜色在编辑器中的效果了。
<br>
## 小结
<br>
好了，以上就是我们今天内容的全部了。要说我最喜欢今天内容的哪个部分，那就是在设置中使用取色器和自动更新了，有了它们，我可以修改大部分 VS Code 组件的颜色，也可以修改编辑器内代码的颜色，同时还能实时地预览，可以说不会编程也能够轻松自定义 VS Code 的主题了。你是不是也想动手试一试了呢？
- 开篇词讲玩转编辑器，向高效能编程再进一步
- 01讲学编辑器，到底应该学什么
- 02讲VSCode的Why、How和What
- 03讲如何快速上手VSCode?
- 04讲 如何做到双手不离键盘
- 05讲快捷键进阶攻略
- 06讲拒绝重复，你一定要学会的多光标特性
- 07讲如何快速在文件、符号、代码之间跳转
- 08讲玩转鼠标操作
- 09讲代码自动补全、快速修复和重构的二三事
- 10讲拒绝重复，你的代码百宝箱：如何书写codesnippet
- 11讲一定要用好代码折叠、小地图和面包屑特性
- 12讲极速搜索有时候比Intellisense还重要
- 13讲优化你的编辑器设置
- 14讲什么是工作台和命令面板
- 15讲了解文件管理，什么是multi-rootworkspace
- 16讲怎么在编辑器里做好版本管理
- 17讲如何配置终端模拟器，告别系统终端
- 18讲为你的项目打造Workflow（上）
- 19讲为你的项目打造Workflow（下）
- 20讲聊debugger时，我们在聊什么
- 21讲你不知道的工作区快捷键
- 22讲基于自然语言或者纯文本的设置界面，总有一款适合你
- 23讲基础语言支持：JSON、Markdown
- 24讲前端语言支持：JavaScript和Node.js
- 25讲后端语言支持（一）：Go、Java
- 26讲后端语言支持（二）：Python、C#
- 27讲HTML、CSS以及前端开发神器Emmet介绍与支持
- 28讲如何深度定制自己的主题
- 29讲不错的插件推荐
- 30讲如何在VSCode中配置、部署和调试Docker
- 31讲一些你可能不知道的Tips&Tricks
- 32讲插件开发（一）：why、how和what
- 33讲插件开发（二）：编写编辑器快捷键及分享快捷键配置、代码片段、主题等
- 34讲插件开发（三）：自定义语言支持
- 35讲插件开发（四）：Decorations装饰器
- 36讲插件开发（五）：工作台相关API
- 37讲插件开发（六）：VSCode插件维护和发布要点
- 结束语讲学编辑器，究竟学了什么