How to change the colour of region/endregion in VS Code?

Question

Does anyone know how to change the colour of #region/#endregion? This is greyish in VS Community but not on VS Code.

Thank you in advance.

Answer 1

Try using this extension. Works perfectly for me now.

Better Comments - Visual Studio Marketplace

Here's my settings. You can only use "region" and "endregion" for yourself.

    "better-comments.tags": [
        {
            "tag": "region -",
            "color": "rgba(0,96,100,5)",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "region",
            "color": "#00F5FF",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "endregion",
            "color": "rgba(0,96,100,10)",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "?",
            "color": "#3498DB",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "//",
            "color": "#474747",
            "strikethrough": true,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "todo",
            "color": "#FF8C00",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "*",
            "color": "#98C379",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
    ],

Here's how it looks like

Answer 2

Because the terms #region/#endregion are part of a comment, looking at their scopes with the command Developer: Inspect TM Scopes gives you only a comment scope so if you change the comment scope by the following tokenColorCustomization:

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

will change all comments - probably not what you want. Plus you can only change the fontColor and fontStyle (like italics) there.

Better is using the extension Highlight to find, via a regex, what you want to highlight.

Using //#region - your language may have different comment indicators at the start. If so, modify the first capture group (//\\s*) below.

  "highlight.regexes": {

    "(//\\s*)(#region|#endregion)": [

      // the first capture group, the '//' uncolored here, but must have the entry below
      //  you could color those separately if you wish
      {},

      // capture group: #region or #endregion
      {
        // "overviewRulerColor": "#ffcc00",
        "backgroundColor": "#f00",
        "color": "#fff",
        // "fontWeight": "bold",
        "borderRadius": "3px",
      },
    ]
  }