如何结合来自两个不同主题的 VS Code workbench 和令牌颜色

How to combine VS Code workbench and token colours from two different themes

我最近从 Sublime Text 3 转移到 VS Code,我想知道 - 在提出这个问题时 - 是否有一种方法可以使用我用于语法突出显示的 .tmTheme 文件崇高的文字。

我知道这将涉及创建自定义主题,因为 VS Code 并没有像 Sublime 和 Atom 那样从本质上将 UI 样式与语法突出显示分开,但是 VS Code 至少提供任何方法来自动化在使用 .tmTheme 文件中的编辑器颜色时组合一个主题的 UI(我认为在 VS Code 中称为 workbench)的过程?

在撰写本文时,唯一的方法真的是用 editor.tokenColorCustomizations 单独设置我的每个语法颜色吗?

将 VS Code 颜色主题的 UI 样式与现有 .tmTheme 文件中的语法突出显示相结合

不幸的是,截至撰写本文时,还没有简单的方法来完成此操作。单独使用 VS Code 的 Yeoman 主题生成器工具多次失败后,我终于设法按照 the instructions here 进行操作,然后进行一些额外的手动工作,尽管我发现第一种方法出于某种原因容易出现问题回到原点。然后我想出了第二种更持久的方法,到目前为止这还没有恢复。

方法一(容易倒退)

打开VS Code终端(Ctrl'),然后运行安装下面的命令,运行 Yeoman 主题生成工具:

npm install -g yo generator-code
cd %USERPROFILE%\Desktop
yo code 

Select New color themeStart fresh,然后按照提示输入您的主题名称和 ID(按 Enter 键将描述留空)。 Yeoman 将在您的桌面上为您的新主题创建一个主题文件夹。

假设您想要用作基础的 UI 样式的主题已经安装为 VS Code 扩展,导航到 %USERPROFILE%\.vscode\extensions,单击基础主题的文件夹,然后找到它-color-theme.json 文件(通常在 themes 文件夹中)。将此文件复制到 newly-created 主题的 themes 文件夹,确保删除该文件夹中现有的 -color-theme.json

打开 newly-copied -color-theme.json 文件并查找以 "tokenColors": 开头的行。删除它后面的所有内容,包括方括号:

...并替换为包含语法高亮样式的 .tmTheme 文件的名称:

"tokenColors": "syntax-highlighting.tmTheme"

最后,将语法高亮文件复制到themes文件夹,然后将整个主题文件夹复制到%USERPROFILE%\.vscode\extensions

重新启动 VS Code,并更改活动主题 (CtrlK,CtrlT) 到你的新主题。

方法二(持久化)

打开VS Code终端(Ctrl'),然后运行安装下面的命令,运行 Yeoman 主题生成工具:

npm install -g yo generator-code
cd %USERPROFILE%\Desktop
yo code 

Select New color theme, Import and inline an existing theme,然后输入要使用其语法高亮样式的.tmTheme 文件的路径。注意这里必须是不带引号的绝对路径:

按照提示输入主题名称和 ID(按 Enter 将描述留空),然后 Yeoman 会在您的桌面上为新主题创建一个主题文件夹。

假设您想要用作基础的 UI 样式的主题已经安装为 VS Code 扩展,导航到 %USERPROFILE%\.vscode\extensions,单击基础主题的文件夹,然后找到它文件(通常在 themes 文件夹内)。

复制此文件 colors 对象中的所有样式:

...并将它们粘贴到 Yeoman 创建的主题文件夹中 -color-theme.json 文件的 colors 对象中,确保删除所有存在的对象。

最后,将整个主题文件夹复制到%USERPROFILE%\.vscode\extensions

重新启动 VS Code,并更改活动主题 (CtrlK,CtrlT) 到你的新主题。如果你正确地遵循了这个过程,你现在应该有一个 VS 代码颜色主题,它使用你选择的基本主题的 UI 样式和你选择的 .tmTheme 文件的语法突出显示样式,并且不会在没有警告的情况下恢复.