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

I went through https://code.visualstudio.com/docs/getstarted/theme-color-reference but can't seem to find the setting for changing the comment color.

I am currently using Atom One Dark Theme and just like to lighten the color a little bit so I can read it better.

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

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 punctuation.definition.comment comment.block.documentation storage.type.class.jsdoc entity.name.type.instance.jsdoc variable.other.jsdoc

1.Go to your settings.

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

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. 5.Then save the changes.(Ctrl+S)

6.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. :)

Doc, Block, and Line settings

To have differnet colors for Doc, Block, and Line comments:

"editor.tokenColorCustomizations": {
    "[Cobalt2]": {
        "textMateRules": [
            {
                "scope": [
                    "comment.block",
                    "punctuation.definition.comment.end",
                    "punctuation.definition.comment.begin"
                ],
                "settings": {
                    "foreground": "#85b3f8",
                    "fontStyle": "bold"
                }
            },
            {
                "scope": [
                    "comment.block.documentation",
                    "punctuation.definition.comment.begin.documentation",
                    "punctuation.definition.comment.end.documentation"
                ],
                "settings": {
                    "foreground": "#6bddb7",
                    "fontStyle": "bold"
                }
            },{
                "scope":["comment.line", "punctuation.definition.comment"],
                "settings": {
                    "foreground": "#FF0000",
                    "fontStyle": "bold"
                }
            }
        ]
    }
}

Tested with C++.

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.

Like Mark said, but add in the "scope": after "comment"

> "punctuation.definition.comment"

to color also the punctuation,

>e.g. (// in javescript | /* */ in css | <!-- --> in html).

"scope": ["comment", "punctuation.definition.comment"]

While commenting on comment subject, I found "Better Comments" extension of VS Code very useful. You can give various colors ‎to your comments and hence categorize your comments based on importance etc. ‎ Default comments color can also be changed.‎ https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
Example:‎

This extension can be configured in User Settings or Workspace settings.‎

You can modify your VS code by simply edit your setting file in VS code and follow these 3 steps.

step1:

step2:

Step3:

To change VS Code comment color

File --> Preferences --> Settings

Choose the "Workspace Settings" tab to only change it for this project
Choose the "User Settings" tab to change it for all projects

Do a search for "settings.json" and look for an option to "Edit in settings.json"

Insert this color setting for the comments somewhere inside the curly brackets:

  "editor.tokenColorCustomizations": {
    "comments": "#ff4"
  }

It might complain that you are overriding your current color theme, just ignore that.

If there is already a section for "editor.tokenColorCustomizations" then just add the line to specify the comment color.