如何更改 VSCode 中指定语法的颜色，而不影响由主题着色的其余语法？

Question

我真的很喜欢V.S。代码主题，Abyss。有时我发现主题使我的代码难以阅读，因此在编辑器中呈现的文本看起来像是融入了背景；我认为更改个别语法颜色将是一个很好的解决方案。

我希望能够调整几个颜色标记，同时保持其余语法不变。我如何才能 select 更改颜色标记的属性，而不影响当前在编辑器中设置的主题的任何其他部分？

我想在 UI 的其余部分使用 GitHub dark default 主题的代码语法颜色和 Abyss 主题。

I found a site (click to see) 建议使用 editor.tokenColorCustomizations 属性.

更改语法颜色

我无法理解如何将颜色配置从 GiHub dark default 复制到 Abyss 主题。

Answer 1

V.S。代码用户可以设置编辑器中显示的语法样式，也可以设置编辑器自身的样式——这包括 workbench，以及 workbench 中的所有项目。要开始在编辑器中设置 workbench 或语法样式，您必须首先将以下 JSON 属性添加到用户范围的 settings.json 文件中，或者将其添加到工作区范围的文件中settings.json.

"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]

正确配置的示例 settings.json 文件：

// "./.vscode/settings.json"
{
    "workbench.colorCustomizations": {
        "editor.background": "#08182F",
        "sideBar.background": "#00132D",
        "panel.background": "#00132D",
        "activityBar.background": "#002040",
        "editorGroupHeader.tabsBackground": "#00132D",
        "tab.inactiveBackground": "#00132D",
        "tab.activeBackground": "#003054",
        "tab.activeBorder": "#003054",
        "breadcrumb.background": "#003054",
        "statusBar.background": "#005280",
        "sideBar.border": "#103050",
        "titleBar.border": "#103050",
        "statusBar.border": "#103050",
        "menu.border": "#103050",
        "contrastBorder": "#103050",
        "panel.border": "#103050",
        "editorRuler.foreground": "#103050",
        "tab.border": "#103050",
        "tab.lastPinnedBorder": "#103050",
        "activityBar.border": "#103050",
    },

    "editor.tokenColorCustomizations": [
        {
            "scope": "punctuation",
            "settings": {
                "foreground": "#C4C4C4",
                "fontStyle": ""
            }
        },

        {
            "scope": "comment",
            "settings": {
                "foreground": "#246488",
                "fontStyle": ""
            }
        },

        {
            "scope": "string",
            "settings": {
                "foreground": "#98DAF4",
                "fontStyle": ""
            }
        },
    ]
}

还有更多属性可用于设置编辑器和语法的样式。这个模板是一个很好的参考资源，它来自 YO CODE 生成器，许多主题设计者在创建新主题时都将其用作起点。

Theme Template（例如，您不必制作主题即可使用这些属性）。

编写主题属性时，您可以使用的最有用的工具——就像上面的示例一样——是 VSCodes 建议小部件。建议小部件最常用于自动完成代码，但是，它的用途远不止为您完成一行文本。如果您键入 "background"，而您正专注于 colors 或 tokenColors 属性之一，则可用背景属性的完整列表将是可供选择，而且您不仅限于背景属性，建议小部件将用于查找边框、前景、图标、按钮、输入、栏、高亮等等

也许最好的阅读资源是 VSCode Contributed Page on Color-Themes

编辑：如果您下载 GitHub 主题，您可以找到该主题的 JSON 文件，它是 "Dark GitHub 主题的源代码" 在以下位置：

$HOME/.vscode/extensions/github.github-vscode-theme-4.1.1/themes/dark.json

当您拥有主题的源 JSON 文档时，您可以使用以下属性将您找到的主题的各个属性复制并粘贴到您的 ./.vscode/settings.json 文件中：

"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]

注意：需要一些练习和一些阅读才能擅长创建主题，或者甚至只是配置您当前的主题以像您现在所做的那样对其进行自定义。

额外帮助

我想如果我解释一下你在做什么可能会有所帮助。

工作区settings.json文件，位于每个项目的根目录中...

`"./.vscode/settings.json"`

...优先于所有其他配置文件，因此，当一个设置或属性在两个文件中配置时，其中一个文件是 "./.vscode/settings.json" 然后配置集在 "./.vscode/settings.json" 内将赢得另一个文件中的配置，因为 "./.vscode/settings.json" 覆盖它所拥有的任何配置，这些配置也保存在其他地方。（我希望这是有道理的）...

工作区 "settings.json" 文件旁边是用户 settings.json 文件，它位于：

`"$HOME/.config/Code/User/settings.json"`

所以此时您基本上只需要知道您的 settings.json 文件就是这片土地的字眼，其他一切都将被覆盖。这非常重要，因为当您使用 settings.json 文件来设置颜色标记属性以突出显示某些被主题着色的语法时，并且由于您不喜欢它而重新着色，这就是您在做什么, 正在覆盖位于主题扩展目录 @ $HOME/.vscode/extensions 中的主题 JSON 文件。如果您没有在有效的 settings.json 文件中设置属性，则属性将保持不变。这允许您 select 并通过覆盖您不喜欢的属性来选择要更改的属性。正如我在评论和上面所说的那样，这些是您将用来执行覆盖的属性。

"colors":{ /* properties here */ }
"tokenColors":[ /* properties here */ ]

与其尝试复制和粘贴整个主题，不如尝试更改单个元素。成功更改一个元素后，您可以尝试同时更改多个元素。

如何更改 VSCode 中指定语法的颜色，而不影响由主题着色的其余语法？

How to change the color of a specified syntax in VSCode, without affecting the rest of the syntax that is colored by the theme?

themes

codehighlighter

visual-studio-code

额外帮助

我想如果我解释一下你在做什么可能会有所帮助。

`"./.vscode/settings.json"`

`"$HOME/.config/Code/User/settings.json"`