vscode 自定义(修改已有)主题教程

2024-05-10 13:44:00

在现有主题上创建

打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）。
输入并选择 “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的最直接方法：

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

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

2. 查阅语言的语法定义文件（Grammar File）

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

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

码农公寓