在现有主题上创建

  1. 打开命令面板(Ctrl+Shift+PCmd+Shift+P)。
  2. 输入并选择 “Developer: Generate Color Theme From Current Settings”。

这会根据你当前选择的主题(一个json)创建另一个(复制一份)json,我们就修改这个json

保存为extension

  • vscode识别你的主题,你需要将你的json保存为一个extension
  • 你可以在你的用户文件夹下的.vscode/extension看到你所有的扩展
  • 在这里创建一个文件夹作为我们的自定义主题,假定名字为custom_theme
  • 创建如下目录格式:
custom_theme/
--package.json
--themes/
----my_theme.json
  • 在package.json中指定你的json的路径
    示例:
{
	"name": "theme-custom", // 在vscode的唯一标识符号
	"version": "0.1.0",
	"publisher": "GV",
	"engines": { "vscode": "*" },
	"contributes": {
		"themes": [
			{
				"label": "chuck", // 在vscode中主题列表显示的名字
				"uiTheme": "vs-dark", // 是暗色主题还是亮色,亮色就是(vs)
				"path": "./themes/my_theme.json" // 相对路径
			}
		]
	}
}

修改scope

  • 修改颜色示例
{
    "name": "My Custom Theme",
    "colors": {},
    "tokenColors": [
        {
            "scope": "variable.parameter", // 指定改变什么
            "settings": {
                "foreground": "#FF00FF" // 指定颜色
            }
        }
    ]
}

查看有哪些scope

那么究竟有哪些scope可以指定呢

1. 使用VSCode的“Inspect Editor Tokens and Scopes”功能

这是查找特定代码片段所对应scope的最直接方法:

  1. 打开一个Python文件或任何你正在工作的语言的文件。
  2. 将光标放在你想要查看颜色作用域的代码上。
  3. 打开命令面板(Ctrl+Shift+PCmd+Shift+P)。
  4. 输入并选择“Developer: Inspect Editor Tokens and Scopes”。

这将显示一个悬浮窗口,列出当前代码片段的所有相关scope信息,这是决定如何通过主题定制颜色的关键信息。

2. 查阅语言的语法定义文件(Grammar File)

每种语言的语法都是通过特定的文法文件定义的,通常是.tmLanguage.json文件。这些文件定义了语言的语法并将其与特定的scope名称关联。查看这些文件可以让你了解可用的scope名称:

  • 对于内置语法,VSCode的源代码可在其GitHub仓库中找到,特别是在extensions文件夹下。
  • 对于扩展提供的语言支持,你可以查看相关扩展的GitHub仓库(如果可用)。

其实每种语言提供的scope是不同的,这点可以通过以下方式发现

  • 在语言A的主题下复制一份主题,然后在语言B下使用,这时即使使用方法1查看scope,也会发现有些语句根本没有合适的scope

那么具体这些scope是谁定义的呢?

答案是Textmate,一种用于通过正则表达式定义语法高亮的文件。你可以对现有语言进行更改也可以对一个新的语言进行语法高亮的定义。 你可以使用everything搜索.tmLanguage来找到电脑上所有的这种文件。通过查看vscode目录下的对应语言的可以发现这个语言具体有哪些scope

3.扩展 (Extra)
  • 优先级:
    1. 具体性优先(Scope Specificity)
      更具体的 scope 优先级更高。具体性是通过 scope 的深度(即点号分隔的层次)来衡量的。较长、较具体的 scope 会比较短、较广泛的 scope 拥有更高的优先级。
    1. 加载顺序(Order of Definitions)
      如果两个 scope 的具体性相同或无法通过具体性区分,那么 VSCode 会使用它们在 tokenColors 配置文件中出现的顺序,较早定义的 scope 会优先生效。

  • 除了Textmate的scope之外,不同语言还会有特定的semantic token,这些semantic token的优先级是最高的,可以在package.json中修改semantic token对应的颜色。
    在这里插入图片描述
    在这里插入图片描述
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐