How can I change the color for bracket highlighting in Visual Studio 2017?

Question

I'm trying to configure brackets highlighting in Visual Studio 2017 (version 15.6.6, using the "Light" theme), but I can't get it to work, and I don't understand whether I am doing it wrong or the feature is buggy.

I'd simply like Visual Studio to make matching brackets turn red, instead of the default setting of having a grey background.

By going to Tools -> Options -> Environment -> Fonts and Colors, I find three settings:

• Brace Matching
• Brace Matching (Highlight)
• Brace Matching (Rectangle)

Apparently, the first two do... Nothing. I've tried setting the foreground and background to different colors, but I see no change, even after a restart. The only setting that does something is the third one, where I can change the color of the background rectangle as expected. But that isn't what I want.

Why don't the first two settings do anything? Is it a bug? How can I make matching brackets become red?

I've found other questions about Visual Studio 2013 and Visual Studio 2015. They don't help, and the latter turned out to be a bug. Is this another one?

Answer 1

Somehow, off topic. I would warmly recommend you to make use of the (free) Viasfora extension for Visual Studio.

It comes with plenty of goodies that will make you forget the need to click the bracket to get its match.

Example: It colors the brackets with a different color for each statement.

From Visual Studio Marketplace: https://marketplace.visualstudio.com/items?itemName=TomasRestrepo.Viasfora#overview

Answer 2

Tools > Options > Environment > Fonts and Colors > Brace Matching > Item Background set that to your color.

Here are all the Brace Matching settings I am using:

• Brace Matching: Item foreground: Green, Item background: Green, Bold: checked

• Brace Matching (Highlight): Item foreground: Green, Bold: checked

• Brace Matching (Rectangle): Item foreground: appears disabled,
  Item background: Automatic, Custom, Bold: checked

Visual Studio Community 2017

HTH

Answer 3

Its the Brace Matching (Rectangle) color to override the bracket highlighting color.

Answer 4

When you're using ReSharper, you have to also set the color for ReSharper Matched Brace (it's in the same list as all Visual Studio color settings)

Answer 5

Go to File/Preference/ Setting

on the setting click on the Extension, then BracketPair(you must download this extension first to show up here). In the BracketPair setting page, get you mouse hover on Bracket Pair Colorizer: Color Mode option, and a setting icon will appear, click on that, and choose the Copy Setting as JSON.Bracket Setting

From the drop-down you can choose either Consecutive or Independent. Click on the Edit in setting.json link below Bracket Pair Colors, and it will open a tab with JSON options to be edited. Based on your choice, you will see different JSON options. Keep in mind that you can change these options in User Setting and Workspace Seettings. In the User Setting tab, if you click on the Edit in setting.json link, the setting.JSON look like following:

{
"workbench.iconTheme": "material-icon-theme",
"http.proxyStrictSSL": false,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"liveServer.settings.donotShowInfoMsg": true,
"workbench.colorTheme": "Solarized Light",
"editor.accessibilitySupport": "off",
"editor.colorDecorators": false,
"editor.highlightActiveIndentGuide": false

}

now you can paste the "Copy Setting as JSON" that you copied before, at the end of the last line of the JSON and your JSON shoul look like the following:

{
"workbench.iconTheme": "material-icon-theme",
"http.proxyStrictSSL": false,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"liveServer.settings.donotShowInfoMsg": true,
"workbench.colorTheme": "Solarized Light",
"editor.accessibilitySupport": "off",
"editor.colorDecorators": false,
"editor.highlightActiveIndentGuide": false,
"bracketPairColorizer.consecutivePairColors": [
  [
    "()",
    [
      "Green",
      "Orchid",
      "LightSkyBlue"
    ],
    "Red"
  ],
  [
    "[]",
    [
      "Blue",
      "Orchid",
      "LightSkyBlue"
    ],
    "Red"
  ],
  [
    "{}",
    [
      "Red",
      "Orchid",
      "LightSkyBlue"
    ],
    "Red"
  ]
]

}

I changed all the Gold color, to Green, Blue and Red.

Note that, I change the key name on "bracketPairColorizer.independentPairColors", this was the default value on my VS Code Setting, to "bracketPairColorizer.consecutivePairColors" to reflect the option on Bracket Pair Colorizer drop-down. If you end you choosing the Independent, just remember to have it in the key name as independentPairColors.

To apply this setting in the Workspace Settings tab, when you click on the linkWorkSpace Settings and it will Open up a settings.json. in there you have the following:

{  "bracketPairColorizer.independentPairColors": [
[
  "()",
  [
    "Blue",
    "Orchid",
    "LightSkyBlue"
  ],
  "Red"
],
[
  "[]",
  [
    "Blue",
    "Orchid",
    "LightSkyBlue"
  ],
  "Red"
],
[
  "{}",
  [
    "Blue",
    "Orchid",
    "LightSkyBlue"
  ],
  "Red"
]

] }

Just keep in mind that you need to change the key name, "bracketPairColorizer.independentPairColors", based on the option you chose on drop-down, Consecutive or Independent

Answer 6

Bracket pair colorization became a native VS Code feature with the latest update. In your settings.json file you can change the colours.

{
  "editor.bracketPairColorization.enabled": true,
  "workbench.colorCustomizations": {
  "editorBracketHighlight.foreground1": "#5caeef",
  "editorBracketHighlight.foreground2": "#dfb976",
  "editorBracketHighlight.foreground3": "#c172d9",
  "editorBracketHighlight.foreground4": "#4fb1bc",
  "editorBracketHighlight.foreground5": "#97c26c",
  "editorBracketHighlight.foreground6": "#abb2c0",
  "editorBracketHighlight.unexpectedBracket.foreground": "#db6165"
},
}