18

When I use VS Code I equip either a light, or dark theme, depending on the time of day, and the lighting in the room. The problem is when I equip a light theme, the

I posted an image of what my editor looks like with my light theme equipped to demonstrate the issue.

I tried BracketPairColorization.enable: "false" as shown in the very bottom image, but it does not work.

Is there a way I can disable the theme-properties that color the bracket-pairs, or setting for disabling the colorized-bracket pairs that works?

enter image description here


I have inspected every settings, and even tried the obvious, as demonstrated in the image below, and figuring out how to turn off the bracketPairColorization feature still eludes me.

enter image description here


How do you completely disable the Colorized Brackets?

2
  • the bracket pair colorizer was an market place extension, they now have included it in the main VSC, in the original extension you could modify the bracket colors by theme, click on the link Workbench: Color Customizations and modify the colors on a theme basis
    – rioV8
    Commented Mar 30, 2022 at 10:38
  • 1
    Try setting "editor.bracketPairColorization.enabled": false
    – CS.
    Commented Mar 30, 2022 at 16:44

2 Answers 2

51

VS Code has enabled the Bracket pair Colorization feature by default. This has caused many people to seek out a way to disable the feature, however there is a bit more to the story than simply using:

"editor.bracketPairColorization.enabled": false,

that is because there are 2 different block guide features that have been built-into the bracketPairColorization feature, as well as an indent-guide feature that highlights much the same way.

To disable all the bracket pair colorization & guides, you need to do the following.

{
    // Bracket-pair colorization
    "editor.bracketPairColorization.enabled": false, 

    // Bracket-pair guides
    "editor.guides.bracketPairsHorizontal": false,
    "editor.guides.highlightActiveBracketPair": false,

    // Indentation guides
    "editor.guides.indentation": false,
    "editor.guides.highlightActiveIndentation": false
}

TO LEARN HOW TO DISABLE ONLY PARTS OF THE FEATURE, OR MORE IN GENERAL ABOUT THIS FEATURE, REFER TO THE FOLLOWING SECTIONS


Intro


Disabling/Configuring Bracket Pair Colorization & Guides

V.S. Code's 'Bracket-pairs Colorization' feature frustrates many developers. Recently it was activated by default, and people were upset about it. The problem wasn't the actual feature itself, but the fact that the feature has an enable/disable setting that doesn't seem to turn the feature off when it is set to disable the feature. If you have tried to turn this feature off, and wound up unable to, do think get mad, or upset at yourself (which is what I do in similar situations), most have went through the same hardship, furthermore; this feature doesn't limit its "frustrating of users" to only those who desire to disable it altogether, the truth is, the feature is highly customizable, it actually includes about 3 different features wrapped into one, and is hard to make sense off for anyone attempting to configure it for the first time.

          The best way to do this is going to be to demonstrate the configuration that you use to completely disable the feature. Then, after that I will walk you through each setting, and explain what it is they do, and the theme properties they are attached too.



Part-2


Disabling Bracket-pair Colorization & Bracket-pair Guides

Below is a "tried -&- true" method for the complete disablement of the bracketPairColorization, bracketPairColorization.guides & guides.indentation editor-features (or perhaps it would be better to type "editor.* features").

{
    // Bracket-pair Highlighting
    "editor.bracketPairColorization.enabled": false, 

    // Bracket-pair guides
    "editor.guides.bracketPairsHorizontal": false,
    "editor.guides.highlightActiveBracketPair": false,

    // Indentation guides
    "editor.guides.indentation": false,
    "editor.guides.highlightActiveIndentation": false
}


Part-3


Disabling Parts of Bracket-pair Colorization

If there are parts of the feature that really chap your hide, but other parts that you like, you can specify the certain rendering, coloring, and "onActive"-highlighting of Bracket-pairs, and the indent guides (horizontal &/or vertical), using the configurations shown below.


(3a) Taking Advantage of the Colorized Bracket-pairs Setting

In truth, I feel the complexity of the configuration required for this feature is 100% justified by what you can do with it. Though I don't agree with it being activated by default.

Below is a demonstration of what can be done with Bracket-pair Colorization that makes it so awesome. As you can see, the setting "editor.language.colorizedBracketPairs": [ ... ] is being configured in the snippet below. The array pairs bellow are the bracket-pairs that the feature will highlight. In other words, this is how to define which bracket-pairs are highlighted. One way to disable the coloring of bracket pairs, is by simply not assigning any pairs to the colorizedBracketPairs setting. You can define everything from a functions braces, to markdown astriks ["***", "***"], to C Pre-processor directives. The world is your ostyer when it comes to this setting.

    "editor.language.colorizedBracketPairs": [
        ["{", "}"], // Block-Scoped Braces/Function-Braces
        ["[", "]"], // Array Square-brackets
        ["(", ")"], // Func Call-args/Declaration-params Brackets
        ["<", ">"], // HTML/XML Tags
        ["\"", "\""], // String Quotations
        ["_", "_"], // Markdown: Italicized
        ["**", "**"], // Markdown: Bold
        ["**_", "_**"], // Markdown: Italicized & Bold
        ["{{", "}}"], // Double Curly Brackets
        ["`", "`"], // Back-tics
        ["#ifndef", "#endif"], // Highlight C Directives as pairs
        ["<%", "%>"], // Wrapping variables in JSON
        ["${", "}"], // Wrapping template variables in JS/TS
        ["$(", ")"] // Wrapping of template variables in BASH
    ]

(3b) Customizing Indentation Guides

You can also customize "Bracket-pair Colorization Guides" & "Indent Guides" by asigning values other than true/false where applicable.

For example:
FOR EXAMPLE: The two settings below, can be configured using a third, boolean-alternate value:

The configuration below, configures the "bracket pair guides" to highlight only the active guides for the active block and no other guides.

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

Now, if you how the setting below configured to true, it won't do anything, if bracketPairs are also active at the same time.

  "editor.guides.highlightActiveIndentation": false,

the editor.guides.highlightActiveIndentation setting in the snippet above, is part of a pair of settings used to customize a feature that was part of VS Code long before bracketPairs were around.



NOTE: If you have the settings below set to true, and if you have "editor.guides.bracketPairs" set to true as well, and over-highlighted editor is the end result. You will see indent guides highlighting at different levels, as the bracket pairs work differently than the indent guides. The bracket-pair guides try to highlight use language-defined blocks, while the indent guides use the value assigned to "tab.width": number? to determine where it will highlight. This causes indentation to be highlighted twice in many situations.

  "editor.guides.indentation": true,
  "editor.guides.highlightActiveIndentation": true,

For some reason they made a setting that helps you configure the two at once, I don't suggest it, but it's the value "always" assigned to "highlightActiveIndentation". If you did want to turn them on with bracket pairs, below shows how you would do it.

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

Another option you have is you can set the "Bracket-pair guides" to true, then configure them to highlight the active block, like this:

  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": true,
  "editor.guides.highlightActiveBracketPair": true,

Part-4


Associated Theme Colors

So if we look at the last snippet, just above (I'll post it again below)...

  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": true,
  "editor.guides.highlightActiveBracketPair": true,

...you can see that all bracket pairs are turned on (so they are colored), but the active ones are highlighted. The way that this works is that in a theme, or in your settings.json file, using the "workbench.colorCustomizations": {}, setting, the standard coloring of the bracket-pairs are colored a different color at 6 different block (or scope) levels. The color properties to which those colors are assigned are shown below:

    "editorBracketPairGuide.background1": "#CC1177",
    "editorBracketPairGuide.background2": "#5544DD",
    "editorBracketPairGuide.background3": "#CC6622",
    "editorBracketPairGuide.background4": "#779428",
    "editorBracketPairGuide.background5": "#009944",
    "editorBracketPairGuide.background6": "#1155DD",

Now, if you have highlightActiveBracketPair set to true, then the block you focus on is brighter, or a different color (it depends on how the properties below are configured), the active bracketPairGuide is colored using these theme-properties:

    "editorBracketPairGuide.activeBackground1": "#EE2288",
    "editorBracketPairGuide.activeBackground2": "#8844FF",
    "editorBracketPairGuide.activeBackground3": "#FF5C0C",
    "editorBracketPairGuide.activeBackground4": "#99CC33",
    "editorBracketPairGuide.activeBackground5": "#00CC88",
    "editorBracketPairGuide.activeBackground6": "#0077FF",

And the actual bracket-pairs (or the actual brackets themselves) are colored using these properties:

    "editorBracketHighlight.foreground1": "#CC1177",
    "editorBracketHighlight.foreground2": "#5544DD",
    "editorBracketHighlight.foreground3": "#CC6622",
    "editorBracketHighlight.foreground4": "#779428",
    "editorBracketHighlight.foreground5": "#009944",
    "editorBracketHighlight.foreground6": "#1155DD",
    "editorBracketHighlight.unexpectedBracket.foreground": "#DD100C",
For more information visit:
https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization

-&/or-

https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization
6
  • Thank you for your answer. Basically do you confirm that the feature is not theme-aware? I mean: it seems I cannot select different colors for different themes. Commented Apr 1, 2022 at 9:34
  • I will update my answer to clarify that
    – SHINIGAMI
    Commented Apr 1, 2022 at 16:27
  • Ok read the opening excerpt, I added a bit to try and clarify what is happening.
    – SHINIGAMI
    Commented Apr 1, 2022 at 16:44
  • I did understand in the first place, but my comment was not clear. The problem is that If I switch to the Default Light theme, I still have invisible yellow brackets. However, this does not happen in the VSC Insiders I have installed. Now I need to understand why. Commented Apr 2, 2022 at 5:56
  • 2
    Thank you! Kind of annoying this feature was enabled by default.
    – Kenji Miwa
    Commented May 10, 2022 at 15:49
2

TL;DR

You can remove this feature by adding the following to the settings.json file.

shortcut: (type ctrl+shift+p, click on Open Settings (JSON))

"editor.language.colorizedBracketPairs": []

or, if you'd like to set specific brackets you can pass them into the array

"editor.language.colorizedBracketPairs": [ ["{", "}"], ...]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.