Each top-level { … } block gets its own background color at 50% transparency, from its first { to its matching last }, so you can see each block at a glance. Braces nested inside share the outer block's color.
Switch modes anytime: click Blocks: … in the status bar, press Ctrl+Alt+Shift+B, or run Brace Block Colors: Switch Mode from the Command Palette. Each click moves to the next mode:
Outer: one color per top-level block, from its first { to its last }
Every: every block, including nested ones, gets its own color
Brackets: only the { and } characters are colored, and each matching pair gets its own color
Off: no coloring. The next click goes back to Outer.
No two blocks share a color. Colors step around the hue wheel by the golden angle (an irrational fraction of a full turn), so hues never repeat, and neighboring blocks land far apart. Saturation and lightness also cycle for extra contrast.
In "every" mode, nested blocks show their own color. Each character is painted only by its innermost block, so a child block isn't muddied by its parent's color stacked underneath.
Braces inside strings and comments are ignored (configurable).
Updates live as you type.
Install
In VS Code, open the Extensions view (Ctrl+Shift+X), search for Brace Block Colors, and click Install.
