VS Code 仅针对 CSS 更改主题颜色答案

【问题标题】：VS Code change theme color only for CSSVS Code 仅针对 CSS 更改主题颜色
【发布时间】：2020-05-18 06:13:59
【问题描述】：

我在 Visual Studio Code 中使用 Atom One Dark Theme 作为主题。出于某种原因，CSS 突出显示迷路了：

我发现您可以通过编辑"editor.tokenColorCustomizations" 来更改comments 等基本标记的颜色。但是如何从上面更改 CSS 对语义呢？谢谢。

【问题讨论】：

【解决方案1】：

我想出了如何实现它。我使用了在 VS Code 的 settings.json 中添加到 tokenColorCustomizations 配置的 TextMate 语法格式。所以这个设置：

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "CSS Class and Support - Property Name",
        "scope": [
          "source.css support.type.property-name",
          "source.sass support.type.property-name",
          "source.scss support.type.property-name",
          "source.less support.type.property-name",
          "source.stylus support.type.property-name",
          "source.postcss support.type.property-name"
        ],
        "settings": {
          "foreground": "#9CDCFE"
        }
      },
      {
        "name": "CSS Class and Support - Property Value",
        "scope": [
          "source.css support.type.property-value",
          "source.sass support.type.property-value",
          "source.scss support.type.property-value",
          "source.less support.type.property-value",
          "source.stylus support.type.property-value",
          "source.postcss support.type.property-value"
        ],
        "settings": {
          "foreground": "#CE9178"
        }
      },
      {
        "name": "CSS Class and Support - Class",
        "scope": [
          "source.css entity.other.attribute-name.class.css",
          "source.sass entity.other.attribute-name.class.css",
          "source.scss entity.other.attribute-name.class.css",
          "source.less entity.other.attribute-name.class.css",
          "source.stylus entity.other.attribute-name.class.css",
          "source.postcss entity.other.attribute-name.class.css"
        ],
        "settings": {
          "foreground": "#D7BA7D"
        }
      }
    }

最终会出现在类似 css 的文件中：

欲了解更多信息，请参阅Syntax Highlight Guide。

【讨论】：

【解决方案2】：

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "CSS Attribute",
        "scope": "support.type.property-name.css",
        "settings": {
          "foreground": "#91bfe3"
        }
      },
      {
        "name": "Shorthand property combines",
        "scope": "invalid.deprecated.color.system.css",
        "settings": {
          "foreground": "#6fcba5"
        }
      },
    ],
  }

scope对应的值可以通过scope inspector tool获取。

您可以使用 Ctrl + Shift + P 打开命令面板，然后打开Developer: Inspect Editor Tokens and Scopes 查看TextMate您有兴趣修改的元素的范围。

【讨论】：