How do I change color of comments in visual studio code?

From 1.15 (July 2017) you can change it from settings.json Ctrl+,

"editor.tokenColorCustomizations": {
    "comments": "#d4922f"
},

From 1.20 (January 2018) you can also do it for each theme separately:

"editor.tokenColorCustomizations": {
    "[Atom One Dark]": {
        "comments": "#d4922f"
    }
},

Finding the right scope:

Developer: Inspect TM Scopes editor.action.inspectTMScopes

demo tm inspect command

Selector priority:

https://code.visualstudio.com/blogs/2017/02/08/syntax-highlighting-optimizations#_textmate-themes

Ok, more examples (for js):

"editor.tokenColorCustomizations": {
    "textMateRules": [{
        "scope": "INSERT_SCOPE_HERE",
        "settings": {
            "foreground": "#ff0000"
        }
    }]
}

comment enter image description here punctuation.definition.comment comment.block.documentation storage.type.class.jsdoc entity.name.type.instance.jsdoc variable.other.jsdoc

Go to your settings. enter image description here

Then search for settings.json enter image description here open the file and then add this line of code:

"editor.tokenColorCustomizations": {

        "comments": "#229977"
    },

change the color of comments,based on your liking by hovering over the color and choosing your desired color. enter image description here Then save the changes.(Ctrl+S) Exit the program. open it again, you will see the changes.

To expand on the answer and @Johnny Derp's comment. You can change the font color and style using:

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "fontStyle": "italic",
          "foreground": "#C69650",
        }
      }
    ]
  },

background cannot be changed in this way, only the color and style. As of June, 2018.

Also in answer to a couple of comments about changing comments puntuation (like the //) colors - which now have to be separately colored with their own textmate rule, a change may be coming to fix that in the October 2019 release - at this point it is an unresolved issue but added to the October 2019 milestone. See https://github.com/microsoft/vscode/milestone/102

In VS Code: 1.56.2

Add to settings.json:

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "comment",
          "comment.block.documentation",
          "comment.block.documentation.js",
          "comment.line.double-slash.js",
          "storage.type.class.jsdoc",
          "entity.name.type.instance.jsdoc",
          "variable.other.jsdoc",
          "punctuation.definition.comment",
          "punctuation.definition.comment.begin.documentation",
          "punctuation.definition.comment.end.documentation"
        ],
        "settings": {
          "fontStyle": "italic",
          "foreground": "#287a1d"
        }
      }
    ]
  }

If there is still stoff missing: CTRL+SHIFT+P => Developer: Inspect Editor Tokens and Scopes hover over the parts that are not colored correctly and add them to "scope".

There you are. :)

Looks like the token colors cannot be customized within the settings at the moment:

The most prominent editor colors are the token colors that are based on the language grammar installed. These colors are defined by the Color Theme and can (currently) not be customized in the settings.

Source: https://code.visualstudio.com/docs/getstarted/theme-color-reference

I did notice that if you go into the theme folders, for example: C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\theme-monokai and edit the monokai-color-theme.json file, look for the line with "name": "Comment" and change the "foreground" color it will work. Just make sure to restart the program.

How do I change color of comments in visual studio code?

Related

Recent Posts