I want to change the yellow bracket level in VSCode to a more visible colour

Question

I am using VSCode and the (default) Light+ theme, on Windows 10. I like this theme but have a lot of trouble seeing the yellow against the white - same is true for all the "light" themes, so there is no point changing themes.

I have found workbench.colorCustomizations in Settings - specifically changing editorBracketHighlight.foreground1 , but it won't stay on the colour I have selected (dark blue) - it sometimes shows as blue (and not consistently) when I bring up the VSCode editor, but, even if I see blue initially, it switches back to yellow shortly after. There seem to be various ways to change the settings, but I haven't found one that will stay!

BTW I have specified editor.bracketPairColorization.enabled (and this does work, using the old colours), so this is not the problem...

Help would be appreciated! TIA

PS I don't care whether this is associated with my workbench or all projects, and all languages or each language specifically (I am just doing Go right now), as I would want this for all projects, and all languages...

Answer 1

To get a better idea of whats going on behind the scenes, first install the Scope Inspector

https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#scope-inspector

then open your settings.json with ctrl+shift+P -> "Preferences: Open Settings.json".

Now open a .go file that you want to use as a test subject... and then enable the scope inspector: ctrl+shift+p -> Developer: Inspect Editor Tokens & Scopes

For me I am using a Slice tutorial as example, Light+ on MacOS :

moving around your cursor you will see different scopes are applied to different tokens in your code.

In this example the inspector shows that it has 2 scopes being applied.

To change the color, go to the Settings.json file...

Inside, alongside whatever else you may have added, put in the "editor.tokenColorCustomizations" object with a sub "textMateRules" object, and include the scopes you want to target using the ScopeInspector mentioned above:

{
  "editor.tokenColorCustomizations":{
    // "comments": "#33FFCC",  //will affect all comments in VSCode...
    "textMateRules": [
      { "scope": "punctuation.definition.bracket.square.go",
         "settings": {
            "foreground": "#8110239f",
            "fontStyle": "bold",
         }
      },
     //.... Other rules you may add for different scopes you find with inspector etc... 
    ]
  } //end "editor.tokenColorCustomizations"
}

In this example, The result immediately changes to a dark red: