2

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

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

在此处输入图像描述

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

在此处输入图像描述

我找到了一个网站（点击查看），它建议使用editor.tokenColorCustomizations属性更改语法颜色。

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

4

1 回答 1

1

VS Code 用户可以设置显示在编辑器中的语法样式，也可以设置编辑器自身的样式——这包括工作台和工作台中的所有项目。要开始在编辑器中设置工作台或语法的样式，您必须首先将以下 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生成器，它是几个主题设计师在创建新主题时使用的起点。

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

最有用的工具是在编写主题属性时——就像上面的例子一样——是 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文件设置颜色标记属性以突出显示由主题着色的某些语法时，并且因为您不喜欢它而对其重新着色时，您所做的就是覆盖主题的JSON 文件位于主题扩展目录 @ $HOME/.vscode/extensions。如果您未在有效settings.json文件中设置属性，则该属性将保持不变。这使您可以通过覆盖您不喜欢的属性来选择和选择要更改的属性。正如我在评论和上面所说的，这些是您将用于执行覆盖的属性。

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

与其尝试复制和粘贴整个主题，不如尝试更改单个元素。一旦你成功地改变了一个元素，那么你可以尝试同时改变几个元素。

于 2021-06-29T23:15:33.140 回答