CODEWITHSUNDEEP
visual-studio-code
Xavier Sky
Xavier Sky

Reputation: 731

How to change indent guide line color between brackets in VS Code?

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

I have this:
enter image description here

Here is what I would like instead:
enter image description here

How can I do that?

Upvotes: 51

Views: 36936

Answers (8)

Mehdi Faraji
Mehdi Faraji

Reputation: 3814

You can change the background color of indent guide from settings.json.

Navigate to your settings.json by pressing cmd or ctrl + shift + P and type settings.json and press Enter.

Then paste the following code:

  "workbench.colorCustomizations": {
    "editorIndentGuide.background1": "#ffffff",
  },

Upvotes: -2

Sergey Beloglazov
Sergey Beloglazov

Reputation: 160

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

Upvotes: 3

Mark
Mark

Reputation: 180659

Update for vscode v1.81 (in Insiders now and presumably in Stable early August 2023):

These colorCustomizations have been added so that you can separately color the first 6 indent guides - counting from far left in your code to the right, see the demo):

  "workbench.colorCustomizations": {

    "editorIndentGuide.activeBackground1": "#ffc400",
    "editorIndentGuide.activeBackground2": "#ff0000",
    "editorIndentGuide.activeBackground3": "#a51283",
    "editorIndentGuide.activeBackground4": "#ff8c00",
    "editorIndentGuide.activeBackground5": "#ffc400",
    "editorIndentGuide.activeBackground6": "#ffc400",

           // non-active indent guide colors
    "editorIndentGuide.background1": "#0066ff",
    "editorIndentGuide.background2": "#00e5ff",
    "editorIndentGuide.background3": "#00e5ff",
    "editorIndentGuide.background4": "#00e5ff",
    "editorIndentGuide.background5": "#00e5ff",
    "editorIndentGuide.background6": "#00e5ff"
  }

indent guide colors 1-6

Notice that editorIndentGuide.activeBackground1 and editorIndentGuide.background1 refer to the indent guides on the far left and so on. Only one activeBackground is colored at a time - at whichever level it happens to be from the left.

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

Upvotes: 92

aj_shela
aj_shela

Reputation: 377

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

Upvotes: 2

Eric Moon
Eric Moon

Reputation: 131

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

Upvotes: 0

SKT
SKT

Reputation: 148

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

Upvotes: 8

Xavier Sky
Xavier Sky

Reputation: 731

I have found an extension for that :

https://marketplace.visualstudio.com/items?itemName=spywhere.guides

Or this one :

https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator

Upvotes: 1

Mark
Mark

Reputation: 180659

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

"workbench.colorCustomizations": {

   "editorIndentGuide.background": "#ff0000"
}

Upvotes: 13

Related Questions