Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
1min

Bracket Colorization became a native VS Code feature with the August 2021 update, and it replaces the popular Bracket Pair Colorizer extension. The reason behind the new native functionality is that the extension suffered from bad performance when colorizing large files (I never noticed that, but hey... ๐Ÿคทโ€โ™‚๏ธ).

Colored brackets in VS Code

When I went to my VS Code settings to enable the feature, I couldn't figure out how to configure the bracket colors to match my color theme. Unfortunately, the setting description was not very helpful because it doesn't tell what to put into workbench.colorCustomizations.

VS Code setting: Editor > Bracket Pair Colorization: Enabled (Controls wether bracket pair colorization is enabled or not. Use 'workbench.colorCustomization' to overwrite bracket highlight colors.))

Luckily, I found a tweet by Rachel Leggett that describes how to configure the colors using the editorBracketHighlight.foreground keys.

So here we go with something to copy and paste into your settings.json.

{
  "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"
  },
}
Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 4 days ago.

Related Topics

Related Articles