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]": {...}
To find the right scope, you need to open up the tokens and scopes inspector. Press Ctrl + Shift + P to open up the command palette, and then type and search for Developer: Inspect Editor Tokens and Scopes, as shown here:
Select it. Now, you can click around on different syntax to see the syntax highlighting scope and information, like this:
When done, hit Esc to exit the tokens and scopes inspection mode.
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 stuff missing: CTRL+SHIFT+P => Developer: Inspect Editor Tokens and Scopes (see screenshots added by @Gabriel Staples to the main answer by @Alex, here). Hover over the parts that are not colored correctly and add them to "scope".
There you are. :)
To have differnet colors for Doc, Block, and Line comments (tested in C++):
I.e. for the Cobalt2 theme:
"editor.tokenColorCustomizations": {
"[Cobalt2]": {
"textMateRules": [
{
"scope": [
"comment.block",
"punctuation.definition.comment.end",
"punctuation.definition.comment.begin"
],
"settings": {
"foreground": "#85b3f8",
"fontStyle": "bold"
}
},
{
"scope": [
"comment.block.documentation",
"comment.block.javadoc.java",
"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"
}
}
]
}
}
btw: The new default theme is called [Default Dark Modern] and the old default was called [Default Dark+]. You can apply the mod to multiple themes at the same time by just putting them in the same quote. ("[Default Dark Modern][Default Dark+]").
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.
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"]
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.
Update #2 (newest): see here to go back to the old settings: How to colorize Python docstrings to your liking; ex: like strings
Update #1: I opened a PR to just fix this in the upstream theme in the VSCode source. Issue: Python multi-line comment strings should be treated as comments in the Monokai theme.
I really like how comments in Sublime Text are subdued so they don't get in your way. So, to go from this in VSCode, where the Python block comment strings are an obnoxious yellow:
...to this, where the Python block comment strings are a nice subdued green just like line comments:
...you need to add this to your settings.json file:
{
// your other settings here
// new settings to fix the block comment strings:
"workbench.colorTheme": "Monokai",
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
// For Python multi-line docstrings / block comments!
"string.quoted.docstring.multi.python",
],
"settings": {
// match regular Python comment color
"foreground": "#88846F"
}
}
]
},
}
See here for how to open settings.json from the command palette, and for where it's located on your OS: How can I open Visual Studio Code's 'settings.json' file?
In order to find out that I needed to use the textmate scope of "string.quoted.docstring.multi.python" above, I used the tokens and scopes inspector in VSCode, as follows:
Press Ctrl + Shift + P to open up the command palette, and then type and search for Developer: Inspect Editor Tokens and Scopes, as shown here:
Select it. Now, you can click around on different syntax to see the syntax highlighting scope and information, like this. You can see the "string.quoted.docstring.multi.python" scope in the image below, when I have my cursor on the """ characters at the start of a Python comment string block:
When done, hit Esc to exit the tokens and scopes inspection mode.
Use this technique to customize other scopes and colors to your liking, or to see what colors and formatting other scopes currently have if you want to copy them.
See my tutorial on GitHub here: How to customize colors in VSCode by using the built-in "Scope inspector" tool
It depends on whether the language support extension you're using uses TextMate grammars or semantic highlighting (see also https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#tokenization).
VS Code seems to define some generic scope names (comment, comment.block, comment.block.documentation, and comment.line), but from my observation, not every language extension (even counting only builtin extensions) adheres to this convention.
You need to figure out what TextMate scopes it defines for comments, which you can do by using the token scope inspector- use the Developer: Inspect Editor Tokens and Scopes command in the command palette. It will open an inspector widget that follow the cursor and show what TextMate scopes match for the token under the cursor. Once you know what tokens exist, pick whichever one(s) is the most suitable and write a corresponding rule in the editor.tokenColorCustomizations setting in your settings.json file.
If you want to get a quick overview of possibly relevant scope names, here's a UNIX command you could use to scan a directory for TextMate grammars and pick out scope names that contain the substring "comment" in their name: jq '.' $(find . -name '*.tm*') | command grep '"name".*comment' | awk '{$1=$1};1' | sort | uniq. You could run this from your VS Code installation's directory to get such scope names for the grammars of builtin extensions, or from your .vscode/extensions/ directory in your user home directory to scan for scopes from grammars of non-builtin extensions that you manually installed. Then you could do a pass to check each of those out and see if it's something you want to modify.
Then you would write something like this in your settings.json file:
"editor.tokenColorCustomizations": {
"[name of your current colour theme here]": { // optionally remove this colour theme wrapper to apply the customization for all themes
"textMateRules": [{
"scope": "commentscope1, commentscope2, commentscope3, ...",
"settings": {
"foreground": "#ff0000", // TODO
},
}],
},
},
For language support extensions that instead use semantic highlighting, it's much simpler. Instead of the editor.tokenColorCustomizations setting, use the editor.semanticTokenColorCustomizations setting, and write a rule for the comment token type (one of the standard token types). Ex.
"editor.semanticTokenColorCustomizations": {
"[name of your current colour theme here]": { // optionally remove this colour theme wrapper to apply the customization for all themes
"rules": {
"comment": "#ff0000", // TODO
},
},
},
I recommend you to use the dark theme of this extension, it is inherited from Material Theme but has more useful syntax aspects Arcaelas Insiders | Themes
