VS Code change theme color only for CSS

Question

I'm using Atom One Dark Theme as a main theme in Visual Studio Code. For some reason CSS highlighting has been lost:

I discoverd that you can change coloring of basic tokens such as comments by editing "editor.tokenColorCustomizations". But how do you change the CSS pair semantics from above? Thanks.

user_12119348 · Answer

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

The value corresponding to scope can be obtained with the scope inspector tool.

You can use Ctrl + Shift + P to open the Command Palette and then open up the Developer: Inspect Editor Tokens and Scopes to look at the TextMate scope of the element you're interested in modifying.

user_705617 · Answer

I figured out how you can achieve it. I used TextMate syntax format added to tokenColorCustomizations configuration within VS Code's settings.json. So this setting:

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

would end up with that appearance inside css alike files:

For more information refer to Syntax Highlight Guide.

VS Code change theme color only for CSS

2 Answers