vscode其实已经有很多完善且好看的主题了，但我总觉得每一个主题对我来说，都有那么一点点不够完美，比如亮色的主题，颜色就没有深色主题那么好看，对比度高。
好不容易看到一个好看的主题吧，又觉得某一部分的颜色没有那么好看。
因此，我基于【Fluffy Theme】自定义了一个自己的vscode代码主题，这里为什么要基于这个主题呢，因我个人非常喜欢粉粉嫩嫩的颜色，这个主题的颜色和我想要的主题颜色非常的接近，但仍然有一些，对我来说不够好看的地方，比如，html标签的颜色太淡了，关键字的颜色不够鲜艳等。
经过我的自定义，最后呈现了如下的效果。
那下面就记录一下我对这个主题改造的过程。
- 首先，打开点击vscode的设置图标>设置
2.在用户tab下面选择工作台>外观>记住你的主题名称（color theme下面的内容）>点击在setting.json中编辑
3.在setting.json中搜这个"editor.tokenColorCustomizations":配置，如果没有的话，自己添加一个。
"editor.tokenColorCustomizations": {
"[Fluffy Theme]": {
"functions": "#f10070f5",//函数
"keywords": "#00befd",//关键字
"types": "#42b983",//类型定义
"variables": "#9814ef",//变量
"numbers": "#e77977",//数字
"comments": "#beb9b9",//注释
"strings": "#e72499", // 字符串的颜色，
"textMateRules": []
}
}4.以上是基本配置，但我们有一些，例如html的标签的属性颜色。html标签属性名后面的等号等等，颜色要怎么设置呢。就全部都放在“textMateRules”这个数组里面。
例如，修改控制符的颜色为：#78c78e，样式为：斜体加粗，就可以像下面这样写。
"textMateRules": [
{
"scope": "keyword.control",//if ,else, try 等控制符
"settings": {
"foreground": "#78c78e",
"fontStyle": "italic bold"
}
},
]5.但可能每个人对自己想要设置的颜色的需求各不相同，但有时候并不知道应该改哪个属性，这也非常的简单。
比如我需要修改html标签前面的标签名的颜色，那只需要选中当前要想要设置的颜色的内容，按住ctrl + shift + p，在输入框中搜索并选择Developer Inspect Editor Token and Scopes
6.选中后，可以看到foreground里面倒数第二个，就是我们要修改的scope的名称。
7.在textMateRules数组中，加入一个元素，并将样式修改在setiing属性下面。例如：我们要把标签名称修改成这个颜色：#ee258d，并且加粗。
{
"scope": "entity.name.tag",//html标签div，
"settings": {
"foreground": "#ee258d",
"fontStyle": "bold",
}
},只要知道了以上的方法，那么所有的代码颜色自定义都可以修改了。
