'How to change indent guide line color between brackets in VSCODE?

I would like to change the color of the line between 2 brackets.

Actually, I want this

enter image description here

Here is what I would like

enter image description here

Does anyone know how to do that?

Many Thanks



Solution 1:[1]

VSCode v.1.23 (released May, 2018) added the ability to colorize the active and other inactive indent guides:

"workbench.colorCustomizations": {
    "editorIndentGuide.activeBackground": "#ff0000",
    "editorIndentGuide.background": "#ff00ff"
}

See release notes indent guides

If you only want the active guides to be visible, set the background of the inactives to transparent ala:

"workbench.colorCustomizations": {
    "editorIndentGuide.background": "#fff0"
}

Solution 2:[2]

Those are indent guides. Their color can be modified in your settings.json:

"workbench.colorCustomizations": {

   "editorIndentGuide.background": "#ff0000"
}

Solution 3:[3]

you can use this, I believe this is what you want

Reference ? https://code.visualstudio.com/updates/v1_23#_highlighted-indent-guides

"workbench.colorCustomizations":{
   "editorIndentGuide.activeBackground":"#ff0000"
}

Solution 4:[4]

Solution 5:[5]

Now VS Code 1.66.2(2020) has inbuilt feature for bracket pair colorizer.

  1. go to settings of vs code
  2. search "bracket pair"

and you will get the settings for bracket pair colorizer.

below video might be of help:

https://www.youtube.com/watch?v=4UXlkUo-emY

below youtube channel has lots for vs code tips:

https://www.youtube.com/c/Code2020/playlists

Solution 6:[6]

I installed Indent Guides extension from Visual Studio Marketplace. Worked in VS 2019.

Solution 7:[7]

If you are using bracket pair guides colourization, as white_shadow suggested, you can change guide colours by these settings:

"editor.guides.bracketPairs" : true,
"editor.guides.highlightActiveIndentation" : true,
"editor.guides.bracketPairsHorizontal" : "active",

"workbench.colorCustomizations": {
    "[YOUR_THEME]": {
      "editorBracketPairGuide.background1": "#FFB86C",
      "editorBracketPairGuide.background2": "#FF75B5",
      "editorBracketPairGuide.background3": "#45A9F9",
      "editorBracketPairGuide.background4": "#B084EB",
      "editorBracketPairGuide.background5": "#E6E6E6",
      "editorBracketPairGuide.background6": "#19f9d8",
      "editorBracketPairGuide.activeBackground1": "#FFB86C",
      "editorBracketPairGuide.activeBackground2": "#FF75B5",
      "editorBracketPairGuide.activeBackground3": "#45A9F9",
      "editorBracketPairGuide.activeBackground4": "#B084EB",
      "editorBracketPairGuide.activeBackground5": "#E6E6E6",
      "editorBracketPairGuide.activeBackground6": "#19f9d8",
}

You have to change "YOUR_TEME" to your theme name.

See https://code.visualstudio.com/api/references/theme-color . Source: https://www.roboleary.net/2021/11/06/vscode-you-dont-need-that-extension2.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Mark
Solution 3 SKT
Solution 4
Solution 5
Solution 6 Eric Moon
Solution 7 Sergey Beloglazov