Question

我将Atom One Dark Theme用作Visual Studio Code中的主要主题。由于某些原因，CSS高亮显示了迷路了：

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

Answer 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。

Answer 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 范围。

VS Code更改主题颜色，仅适用于CSS

2 个答案: