如何在我的主题 vscode 中替换一种颜色

Question

我有一种颜色让我很恼火，我想更改它，但不知道如何找到它并在保持其余颜色不变的情况下更改它。

想要改变下面显示的绿色。

Answer 1

如何在 VSCode 中替换一种颜色

有时你可能不喜欢当前主题的某个颜色，所以 VSCode 允许我们自定义一些颜色来覆盖部分颜色主题。

检查编辑器令牌和范围

VS Code 的标记引擎由 TextMate 语法提供支持。VSCode 颜色主题扩展作者使用内置工具查看语义。我们也可以使用它，我们要做的设置可以认为是扩展颜色主题。别担心，我们的工作很简单。

我将向您展示如何修改字符串的颜色。

首先，打开命令面板。输入关键字“Inspect Editor Tokens and Scopes”以选择并运行该工具。将光标移动到代码上，我们会看到一个类似于下图的面板。

为了快速解决问题，现在我们只看面板的最后一行：`foreground string { "foreground": "#CE9178" }。我们需要的是中间部分，即“字符串”。这是这个语义股份的行动范围。作用域必须是上述 textmate 作用域的一部分。

令牌颜色自定义

接下来，让我们打开文件settings.json并添加一个新设置：editor.tokenColorCustomizations.

保持与tokenColorCustomization您使用的颜色主题相同的键。其实不需要手动输入，VSCode 会在你输入双引号的那一刻列出你所有的颜色主题。

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "[CUSTOM NAME]",
          "scope": "string",
          "settings": {
            "foreground": "#00FFFF"
          }
        }
      ]
    }
  }

然后我们会看到编辑器中字符串的颜色立即发生了变化。

这很容易，现在您可以自己完成。如果您对如何获取范围有疑问，请查看以下部分中的信息。

如何获得范围

我不打算详细解释如何获得范围。以下是更多示例，可帮助您了解如何获取范围。如果还有问题，请参考相关信息，如semantic-highlight-guide。

没有主题选择器

当没有主题选择器时，您可以使用上面的 textmate 范围。

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "source.python",
          "scope": "source.python",
          "settings": {
            "foreground": "#FEAA4F"
          }
        },
      ]
    }
  }

精确的范围

它看起来像一个树状结构，逐层递进。越靠右，语义越精确。

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "entity function name",
          "scope": "entity.name.function",
          "settings": {
            "foreground": "#FEAA4F"
          }
        },
      ]
    }
  }

更多颜色

定义更多颜色规则。

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "entity function name",
          "scope": "entity.name.function",
          "settings": {
            "foreground": "#FEAA4F"
          }
        },
        {
          "name": "string",
          "scope": "string",
          "settings": {
            "foreground": "#45FD36"
          }
        }
      ]
    }
  }

精确控制色彩范围

如果您需要更精确地控制颜色效果范围，请尝试上面的 textmate 范围。更高的范围具有更高的优先级。您可以使用范围的一部分。

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "function-call in python",
          "scope": "meta.function-call.python",
          "settings": {
            "foreground": "#FEAA4F"
          }
        }
      ]
    }
  }

或者

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "function-call generic",
          "scope": "meta.function-call.generic",
          "settings": {
            "foreground": "#FEAA4F"
          }
        }
      ]
    }
  }

或其他。