VScode 自定义主题颜色

最新推荐文章于 2025-11-20 17:59:18 发布

原创最新推荐文章于 2025-11-20 17:59:18 发布 · 4.4k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #vscode 主题 #textMateRules

程序媛的摸鱼日常专栏收录该内容

4 篇文章

订阅专栏

文章讲述了如何在VSCode中基于FluffyTheme自定义代码颜色主题，包括更改函数、关键字、类型等颜色，并通过`editor.tokenColorCustomizations`和`textMateRules`配置HTML标签等特定元素的颜色，以达到个人喜好的完美效果。

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",
            }
        },

只要知道了以上的方法，那么所有的代码颜色自定义都可以修改了。