How to change the color of comments in VS Code?

You can precisely control the color of comments in VS Code by customizing your settings.json file, allowing for personalized readability and visual preferences.

How to Change the Color of Comments in VS Code?

Changing the color of comments in VS Code enhances code readability and can significantly improve your coding experience by making comments stand out or blend in as you prefer. While various themes offer different comment colors, you have the flexibility to set a specific color yourself.

1. Customize Comment Colors via `settings.json`

The most powerful way to change comment colors is by directly editing your user settings.json file. This allows for granular control over various token colors, including comments, and can be applied globally or per theme.

Step-by-Step Guide:

Open VS Code.
Identify the Comment Scope:
- Open any code file that contains comments (e.g., a JavaScript file with // comments).
- Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to open the Command Palette.
- Type Developer: Inspect Editor Tokens and Scopes and select it.
- Click directly on a comment in your code editor. A tooltip will appear, showing detailed information about the token, including its TextMate scope.
- For example, you might see scopes like comment.line.double-slash.js or simply comment. Note down the relevant scope(s). This is similar to "hovering on a box" to identify the element and its properties.
Open User Settings (JSON):
- Again, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
- Type Open User Settings (JSON) and select it. This will open your settings.json file.

Add or Modify editor.tokenColorCustomizations:

Inside your settings.json file, add or modify the editor.tokenColorCustomizations block. This setting allows you to override colors defined by your current theme.
You can target comments generally or use specific TextMate rules for fine-grained control. For instance, if you want your comments to appear in a light blue color:

{
    "editor.tokenColorCustomizations": {
        // Option 1: Apply to all comments globally (simpler)
        "comments": "#ADD8E6", // Light Blue

        // Option 2: Use textMateRules for more specific control
        "textMateRules": [
            {
                // Target the general 'comment' scope
                "scope": "comment",
                "settings": {
                    "foreground": "#ADD8E6", // Light Blue (as preferred)
                    "fontStyle": "italic"    // Optionally make comments italic
                }
            },
            {
                // Example: Target documentation block comments specifically
                "scope": "comment.block.documentation",
                "settings": {
                    "foreground": "#6A9955"  // A different shade, e.g., a greenish color
                }
            },
            {
                // Example: Target specific language comments (e.g., Python single-line comments)
                "scope": "comment.line.number-sign.python",
                "settings": {
                    "foreground": "#808080"  // Gray for Python comments
                }
            }
        ],

        // Option 3: Customize for specific themes
        "[Dark+ (default)]": {
            "comments": "#B2C2D2" // A different blue for the Dark+ theme
        },
        "[Monokai]": {
            "comments": "#FFD700" // Golden color for Monokai theme
        }
    }
}

foreground: Sets the text color. You can use hex codes (e.g., #ADD8E6), RGB values (e.g., rgb(173, 216, 230)), or CSS color names (e.g., "light blue").
fontStyle: Can be set to "italic", "bold", "underline", or a combination (e.g., "italic bold").
scope: This is the TextMate scope you identified in step 2. Using comment is a general approach, but specific scopes like comment.block or comment.line.double-slash.js offer more precision.

Understanding Common Comment Scopes

VS Code uses TextMate grammars to tokenize code. Here are some common scopes you might encounter for comments:

Scope	Description	Example Comment Syntax
`comment`	General scope for all comments.	`//`, `/* ... */`, `#`
`comment.line`	Specific to single-line comments.	`// This is a line comment`
`comment.block`	Specific to multi-line (block) comments.	`/* This is a block comment */`
`comment.block.documentation`	Often used for docstrings or JSDoc comments.	`/** JSDoc comment */`
`comment.line.double-slash`	C-style line comments (JavaScript, C#, C++, etc.).	`// Line comment`
`comment.line.number-sign`	Hash-style line comments (Python, Ruby, Shell).	`# Line comment`
`comment.block.documentation.python`	Python docstrings.	`"""Docstring"""`

2. Change Comment Colors by Changing Your Theme

While direct customization offers the most control, a simpler way to change comment colors is to switch to a different VS Code theme. Each theme defines its own color scheme for various code elements, including comments.

How to Change Themes:

Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
Type Preferences: Color Theme and select it.
Use the up/down arrow keys to preview different installed themes.
Select a theme that has comment colors you prefer.
Browse for More Themes: If you don't find a suitable theme, open the Extensions view (Ctrl+Shift+X or Cmd+Shift+X), search for "theme," and install new ones.

Practical Tips for Customizing Comments

Color Picker: When you type a hex code or color name in settings.json, VS Code often provides a small color box. Hovering over this box will bring up a visual color picker, allowing you to easily experiment with different shades.

TODO/FIXME Comments: You can create specific textMateRules for comments containing keywords like "TODO" or "FIXME" to make them stand out even more.

"textMateRules": [
    {
        "scope": "comment.line.double-slash, comment.block",
        "settings": {
            "foreground": "#ADD8E6" // Light Blue
        }
    },
    {
        "scope": "comment.line.double-slash.todo", // Custom scope for TODOs
        "settings": {
            "foreground": "#FF0000", // Bright Red for TODOs
            "fontStyle": "bold"
        }
    }
]

Note: To make a custom scope like comment.line.double-slash.todo work, you might need an extension that tokenizes // TODO specifically or rely on more advanced regex in TextMate rules if the theme doesn't already provide it.

Theme Specific Overrides: Using the "[Theme Name]": {} syntax within editor.tokenColorCustomizations allows you to define different comment colors for different themes, ensuring your preferences are respected regardless of the active theme.

By leveraging settings.json, you gain full control over how comments appear in your editor, tailoring them to your exact visual requirements and improving your overall coding environment.

How to change the color of comments in VS Code?