Custom VSCode Theme Styles

2023/08/18 5Mins #vscode

自定义 VSCode 主题或布局元素样式

修改编辑器代码字体颜色

只应用于特定主题

如果希望做出的修改只应用于某个主题，而在切换为其他主题以后不再生效的话，可以通过在 settings.json 中添加以下配置来实现，以 Default Light Modern 主题(VSCode默认亮色主题)举例：

1
"editor.tokenColorCustomizations": {
2
  "[Default Light Modern]": {
3
    "rules": {
4
      "*.declaration": { "bold": true }
5
    }
6
  },
7
}

上面就是修改了 Default Light Modern 主题中所有语义标记为 declaration 的 token 所包含的字体为粗体。这是它原本的样式:

那么语义标记是什么? 除了 *.declaration 之外, 还有哪些可以用的标记?

关于这个问题, 可以参考 Semantic Highlighting in Themes 这篇文档, 里面解释了什么是语义标记, 以及除了 *.declaration 之外, 还有哪些可用的标记。其中 Semantic token provider 一节有一个简单的例子用来演示如何在扩展中解析语义标记。

但这并不是本文的重点，因为通常来讲这些标记都是由语言扩展提供的，而且大部分标记都比较笼统，修改一个地方可能导致其他不想修改的地方也受到影响，所以我们更多的是想要修改主题中的某个 token 的样式，而不是修改某个语义标记的样式。

以token为单位修改所有主题

如果我们想以 token 为单位修改所有主题的样式，那么可以通过修改 editor.tokenColorCustomizations 的配置来实现，editor.tokenColorCustomizations 也有提供7类预置的token分类来供我们修改，分别是 comments, strings, keywords, numbers, types, functions, variables，这些分类的 token 会被应用到所有主题中，如果想要修改某个主题中的 token 样式，可以通过在 editor.tokenColorCustomizations 中添加主题名来实现，比如：

1
{
2
  "editor.tokenColorCustomizations": {
3
    "[Abyss]": {
4
      "comments": "#FF0000" // 将所有的注释修改为红色
5
    }
6
  }
7
}

除了这些预置的分类和所有安装了的主题的名字之外，还可以通过 textMateRules 来修改 token 的样式，比如：

1
{
2
  "editor.tokenColorCustomizations": {
3
    "textMateRules": [
4
      {
5
        // token 的 scope，可以通过在 VSCode 中打开命令面板， 输入 `Developer: Inspect Editor Tokens and Scopes` 打开面板， 然后将光标点击不同的代码高亮块来查看
6
        "scope": "comment",
7
        // name 属性是一个字符串， 用来标识这个 token 的名字， 用来在其他地方引用这个 token
8
        "name": "Comment",
9
        "settings": {
10
          // 前景色， 也就是字体颜色
10 collapsed lines
11
          "foreground": "#FF0000",
12
          // 字体的样式，比如粗体，斜体等， 设置为空则表示不设置样式
13
          // 比如说想要取消某个token的粗体
14
          // 就可以设置为： "fontStyle": ""
15
          "fontStyle": "italic"
16
        }
17
      }
18
    ]
19
  }
20
}

不过 textMateRules 的配置比较复杂，如果想要了解更多的话可以参考 TextMate grammars 这篇文档。

修改界面布局部件样式

最后是关于编辑器布局元素的样式设置，比如说可以修改编辑器界面中侧边栏、顶部导航栏、底部状态栏的边框颜色或背景颜色（当然也只能改颜色，像内外边距什么的是不支持修改的）。如果想要修改这些颜色可以使用 workbench.colorCustomizations，更多可配置项可以参考 Theme Color 这篇文档。以下是几个简单的示例：

1
{
2
  "workbench.colorCustomizations": {
3
    "editor.background": "#f2f3f5",
4
    // 所有没有匹配到 token 的颜色
5
    "editor.foreground": "#696969",
6
    // 弹窗的边框颜色
7
    "editorHoverWidget.border": "#424242",
8
    // 鼠标滑过时弹窗的背景色
9
    "editorHoverWidget.background": "#121212",
10
    "button.background": "#42b883",
10 collapsed lines
11
    "button.hoverBackground": "#33a06f",
12
    "statusBar.border": "#00000000",
13
    "statusBar.background": "#e3e3d8",
14
    "activityBar.background": "#e3e3d8",
15
    // 终端顶部边框颜色
16
    "panel.border": "#8888882f",
17
    // 多编辑器窗口之间边框颜色
18
    "editorGroup.border": "#8888882f"
19
  }
20
}

最后贴一份我自己的配置，主要是修改了很多关键字为斜体：

1
{
2
  "editor.tokenColorCustomizations": {
3
    "textMateRules": [
4
      {
5
        "name": "style 标签里id/class选择器和属性名, component 导入组件名",
6
        // support.type.property-name, json 的对象名
7
        "scope": "entity.name.class, entity.name.namespace, entity.name.scope-resolution",
8
        "settings": {
9
          "fontStyle": "italic"
10
        }
18 collapsed lines
11
      },
12
      {
13
        "name": "type,function/const/import/from/async/export/default/return/for/if/else/new/=>/单行多行注释/函数名和参数",
14
        "scope": "keyword.control.type,storage.type,keyword.control.import,keyword.control.export,keyword.control.default,keyword.control.from,storage.modifier.async,keyword.control.flow,keyword.control.loop,keyword.control.conditional,keyword.operator.new,comment,variable.parameter",
15
        "settings": {
16
          "fontStyle": "italic"
17
        }
18
      },
19
      {
20
        "name": "= += -=, {} [] {{}} [[]], 包括函数声明/调用解构的括号",
21
        "scope": "keyword.operator.assignment,keyword.operator.arithmetic, punctuation.section.embedded, meta.brace.square, meta.embedded, punctuation.definition.block,meta.structure.dictionary.json.comments, punctuation.definition.parameters,meta.brace.round, meta.parameter.object-binding-pattern, punctuation.definition.binding-pattern.object, meta.object-binding-pattern-variable, meta.array-binding-pattern-variable, expression.embedded,meta.parameters",
22
        "settings": {
23
          "foreground": "#8888886f"
24
        }
25
      }
26
    ]
27
  }
28
}

Customizing a Color Theme

回顾上一篇

接下来阅读

Libon

Custom VSCode Theme Styles

ToC

修改编辑器代码字体颜色

只应用于特定主题

以token为单位修改所有主题

修改界面布局部件样式