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

user_408718 0
Viewed 1589

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...

text-coloring visual-studio-code go brackets
2 Answers

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 :enter image description here

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:

enter image description here

user_51988050

It seems that I can now colour the brackets as desired without using testMateRules, as follows:

 "editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"bracket-pair-colorizer-2.forceUniqueOpeningColor": false,
"bracket-pair-colorizer-2.showVerticalScopeLine": true,
"bracket-pair-colorizer-2.showHorizontalScopeLine": true,
"bracket-pair-colorizer-2.colors": [
  "#3344F0",
  "Orchid",
  "LightSkyBlue",
  "Green"
],

This seems to work - maybe someone could let me know if there is a problem with this! Thanks

user_4087180
Related