VSCode Light Theme Configuration Bracket-Pair-Colorizer-2

Currently, when using the light theme (Github Light Theme - Gray) with Bracket-Pair-Colorizer-2, 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 its own 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, 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 we switch back 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 field values:

  "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 and override the colors used by the current theme.

  "workbench.colorCustomizations": {
    "[Github Light Theme - Gray]": {
      // Customize colors for the corresponding theme
      "colorizer.color-1": "#ff9900", // Orange-Brown...
      "colorizer.color-2": "#f500f5", // Medium-Pink...
      "colorizer.color-3": "#54b9f8" // Medium-Blue...
    },
    // Default colors
    "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 of my other configurations for 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