VSCode Bright Theme Configuration Bracket-Pair-Colorizer-2

Currently, when using the bright theme (Github Light Theme - Gray) with the Bracket-Pair-Colorizer-2 extension, the default gold-colored brackets are not very noticeable. After searching for an issue, I found a solution.

Comparison

The Bracket-Pair-Colorizer-2 plugin supports customizing colors, with the default colors being:

  // Scope colors
  "bracket-pair-colorizer-2.colors": [
    "Gold", // #ffd700 gold
    "Orchid", // #da70d6 pink
    "LightSkyBlue" // #87cefa light blue
  ],

We can change this list ourselves, for example, by directly changing it to brighter colors:

The author spent 20 minutes adjusting colors on this website hexcolortool.com and finally found a color that closely matches the original color scheme on a white background.

"bracket-pair-colorizer-2.colors": [
  "#ff9900", // Orange-Brown
  "#f500f5", // Medium-Pink
  "#54b9f8" // Medium-Blue
],

But there is a downside to doing this - when switching to a dark theme, we have to change this value again.

We can achieve this goal by modifying the color values of different themes in VSCode.

For example, we can use existing color fields:

  "bracket-pair-colorizer-2.colors": [
    "terminal.ansiBrightMagenta",
    "terminal.ansiYellow",
    "terminal.ansiBrightCyan"
  ]

After understanding the principle, following the solution provided in the issue:

We can use workbench.colorCustomizations to customize the colors that override the current theme's color scheme.

  "workbench.colorCustomizations": {
    "[Github Light Theme - Gray]": {
      // Configure different colors for the corresponding theme
      "colorizer.color-1": "#ff9900", // Orange-Brown...
      "colorizer.color-2": "#f500f5", // Medium-Pink...
      "colorizer.color-3": "#54b9f8" // Medium-Blue...
    },
    // Default color scheme
    "colorizer.color-1": "#ffd700", // "Gold". (Yellow with slight Orange)
    "colorizer.color-2": "#da70d6", // "Orchid". (Pink)
    "colorizer.color-3": "#87cefa" // "LightSkyBlue". (Light Blue)
  },

Then, set the colors for Bracket-Pair-Colorizer-2:

  "bracket-pair-colorizer-2.colors": [
    "colorizer.color-1",
    "colorizer.color-2",
    "colorizer.color-3"
  ],

Finally, here is a summary and other configurations for my Bracket-Pair-Colorizer-2:

  "workbench.colorCustomizations": {
    "[Github Light Theme - Gray]": {
      "colorizer.color-1": "#ff9900", // Orange-Brown...
      "colorizer.color-2": "#f500f5", // Medium-Pink...
      "colorizer.color-3": "#54b9f8" // Medium-Blue...
    },
    "colorizer.color-1": "#ffd700", // "Gold". (Yellow with slight Orange)
    "colorizer.color-2": "#da70d6", // "Orchid". (Pink)
    "colorizer.color-3": "#87cefa" // "LightSkyBlue". (Light Blue)
  },
  "bracket-pair-colorizer-2.colors": [
    "colorizer.color-1",
    "colorizer.color-2",
    "colorizer.color-3"
  ],
  "bracket-pair-colorizer-2.forceUniqueOpeningColor": true,
  "bracket-pair-colorizer-2.highlightActiveScope": true