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

Question

我有一个让我感到烦恼的颜色，想要将其更改，但不知道如何找到并保持其余部分相同。

想要更改下面显示的绿色颜色。

- Kacper Faligowski

Answer 1

如何在VSCode中替换一种颜色

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

检查编辑器标记和作用域

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

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

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

为了快速解决问题，现在我们只需要查看面板的最后一行：`foreground string { "foreground": "#CE9178" }。我们需要的是中间的部分，即"string"。这是此语义栈的一部分。操作中的作用域必须是上面的Textmate作用域的一部分。

标记颜色自定义

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

将tokenColorCustomization的键与您正在使用的颜色主题保持相同。实际上，您不需要手动输入它，VSCode会在您输入双引号时列出所有颜色主题。

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

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

这很容易，现在你可以自己做了。如果你有关于如何获取作用域的问题，请查看下面部分中的信息。

如何获取作用域

我不会详细解释如何获取作用域。以下是更多示例，以帮助您理解如何获得作用域。如果您仍然有问题，请参考相关信息，例如语义高亮指南。

没有主题选择器

当没有主题选择器时，您可以使用上面的 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 scopes。较高的 scope 具有较高的优先级。您可以使用 scope 的一部分。

  "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"
          }
        }
      ]
    }
  }

或其他人。

- alexzshl

---

settings.json在哪里？ - undefined