CODEWITHSUNDEEP
visual-studio-code
Nuuu
Nuuu

Reputation: 2006

How do I change the color of comments in VS 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.

Upvotes: 176

Views: 184647

Answers (14)

hossein sedighian
hossein sedighian

Reputation: 2035

i use

Highlight extension for vscode and i believe that is the best option

image

Upvotes: 0

starball
starball

Reputation: 50064

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

For language-support extensions using TextMate-based highlighting

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 using Semantic highlighting

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

Upvotes: 0

plswork04
plswork04

Reputation: 659

Doc, Block, and Line settings

To have differnet colors for Doc, Block, and Line comments (tested in C++):

Comment previews

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+]").

Upvotes: 9

Alejandro Reyes
Alejandro Reyes

Reputation: 330

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

Upvotes: -2

Gabriel Staples
Gabriel Staples

Reputation: 52459

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.

How to subdue Python block comment strings in VSCode in order to look like Sublime Text's Monokai

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:

image with yellow comments

...to this, where the Python block comment strings are a nice subdued green just like line comments:

image with subdued green 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:

enter image description 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:

enter image description here

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.

How to subdue C and C++ Doxygen comments in VSCode in order to look like Sublime Text's Monokai

See my tutorial on GitHub here: How to customize colors in VSCode by using the built-in "Scope inspector" tool

References

  1. Official VSCode documentation: https://code.visualstudio.com/docs/getstarted/themes
  2. The main answer by @Alex, including re-using the images and text I wrote into Alex's answer as well by editing it.
  3. The answer by @RND
  4. My own tutorial on GitHub: TUTORIAL: How to customize colors and subdue the bright colors in the doxygen comments
  5. My own trial and error and figuring it out with the scope inspector tool because this irritated me so much.

Upvotes: 0

RND
RND

Reputation: 331

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

Upvotes: 23

Mark
Mark

Reputation: 180659

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

Upvotes: 30

Alex
Alex

Reputation: 67493

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:

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:

enter image description here

Select it. Now, you can click around on different syntax to see the syntax highlighting scope and information, like this:

enter image description here

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

Upvotes: 316

J A.
J A.

Reputation: 1346

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

Upvotes: 76

Zeni
Zeni

Reputation: 995

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:‎
Borrowed from extension page
This extension can be configured in User Settings or Workspace settings.‎

enter image description here

Upvotes: 6

Rizwan
Rizwan

Reputation: 4433

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

step1: enter image description here

step2: enter image description here

Step3: enter image description here

Upvotes: 3

Tagoury97
Tagoury97

Reputation: 51

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

Upvotes: 5

EJ Thayer
EJ Thayer

Reputation: 169

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.

Upvotes: 2

Nuuu
Nuuu

Reputation: 2006

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.

Upvotes: 5

Related Questions