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

Or now you can specify settings for multiple themes at once as "[Atom One Dark][Tomorrow Night Blue]": {...}

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 enter image description here comment.block.documentation enter image description here storage.type.class.jsdoc enter image description here entity.name.type.instance.jsdoc enter image description here variable.other.jsdoc enter image description here


1.Go to your settings. enter image description here

2.Type “editor.tokenColorCustomizations” into the search bar then click on “Edit in settings.json”: enter image description here

3.By default, “editor.tokenColorCustomizations” is set to “null”. To customize the comment color, you can add:

{ "comments": "[color code]" }

You can type something like this:

> "editor.tokenColorCustomizations": {
>     "comments": "#e45e91"   },

4.Change the color of comments,based on your liking by hovering over the color and choosing your desired color. enter image description here 5.Then save the changes.(Ctrl+S)

6.Exit the program. open it again, you will see the changes. enter image description here


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

Tags:

Visual Studio Code

Vscode Settings

Recent Posts