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

Question

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

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

我想将主题的代码语法颜色GitHub dark default与AbyssUI 其余部分的主题一起使用。

我发现一个网站（点击查看）建议使用editor.tokenColorCustomizations属性更改语法颜色。

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

Answer 1

VS Code 用户可以设置编辑器中显示的语法样式，也可以设置编辑器本身的 \xe2\x80\x94 样式，其中包括工作台以及工作台中的所有项目。要开始设计工作台或编辑器中的语法样式，您必须首先将以下 JSON 属性添加到用户范围的settings.json文件中，或者将其添加到工作区范围的settings.json.

\n\n

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

\n\n

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

\n

// "./.vscode/settings.json"\n{\n    "workbench.colorCustomizations": {\n        "editor.background": "#08182F",\n        "sideBar.background": "#00132D",\n        "panel.background": "#00132D",\n        "activityBar.background": "#002040",\n        "editorGroupHeader.tabsBackground": "#00132D",\n        "tab.inactiveBackground": "#00132D",\n        "tab.activeBackground": "#003054",\n        "tab.activeBorder": "#003054",\n        "breadcrumb.background": "#003054",\n        "statusBar.background": "#005280",\n        "sideBar.border": "#103050",\n        "titleBar.border": "#103050",\n        "statusBar.border": "#103050",\n        "menu.border": "#103050",\n        "contrastBorder": "#103050",\n        "panel.border": "#103050",\n        "editorRuler.foreground": "#103050",\n        "tab.border": "#103050",\n        "tab.lastPinnedBorder": "#103050",\n        "activityBar.border": "#103050",\n    },\n\n    "editor.tokenColorCustomizations": [\n        {\n            "scope": "punctuation",\n            "settings": {\n                "foreground": "#C4C4C4",\n                "fontStyle": ""\n            }\n        },\n\n        {\n            "scope": "comment",\n            "settings": {\n                "foreground": "#246488",\n                "fontStyle": ""\n            }\n        },\n\n        {\n            "scope": "string",\n            "settings": {\n                "foreground": "#98DAF4",\n                "fontStyle": ""\n            }\n        },\n    ]\n}\n\n

\n

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

\n\n

主题模板（例如，您不必创建主题即可使用属性）。

\n\n

您可以使用的最有用的工具是在编写主题属性时 \xe2\x80\x94 就像上面的示例中 \xe2\x80\x94 是 VSCodes 建议小部件。建议小部件最常用于自动完成代码，但是，它的用处远不止为您完成一行文本。如果您键入"background"colors ，当您将注意力集中在、 或、 属性之一内时，tokenColors将可以从可用背景属性的整个列表中进行选择，并且您不仅限于背景属性，建议小部件将起作用用于查找边框、前景、图标、按钮、输入、栏、突出显示等等

\n
\n\n

也许最好的阅读资源是关于颜色主题的 VSCode 贡献页面

\n\n

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

\n

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

\n

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

\n\n

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

\n\n
\n

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

\n
\n

额外的帮助

\n

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

\n

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

\n

"./.vscode/settings.json"

\n

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

\n

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

\n

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

\n

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

\n\n

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

\n\n

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

\n