CODEWITHSUNDEEP
visual-studio-code
Irakli
Irakli

Reputation: 321

How Do I Change Comma and Bracket Colors in VS Code

Sounds kinda of dumb, but I can't figure out how to target this type of text. What is the command to change the color of commas, quotes, brackets, etc in VS Code 1.5?

Thanks a lot

Upvotes: 16

Views: 15639

Answers (4)

Talal
Talal

Reputation: 713

First set Bracket pair colorization off "editor.bracketPairColorization.enabled": false then set the color you want.

            {
                "scope": [
                    "punctuation.brackets.curly",
                    "punctuation.brackets.round",
                ],
                "settings": {
                    "foreground": "#f1bff4",
                    "fontStyle": "bold"
                }
            },

Upvotes: 1

VonC
VonC

Reputation: 1323203

For brackets specifically, See VSCode 1.60, Aug. 2021, which includes bracket pair colorization as a built in feature.

High performance bracket pair colorization

The editor now supports native bracket pair colorization:

Side by side comparison with bracket pair colorization on and off

Bracket pair colorization can be enabled by setting "editor.bracketPairColorization.enabled": true.
All colors are themeable and up to six colors can be configured.

We implemented this feature to address performance issues of the famous Bracket Pair Colorizer extension by CoenraadS.

Settings:

 colorCustomizations:

{
  "workbench.colorCustomizations": {

    "editorBracketHighlight.foreground1": "#3700ff",
    "editorBracketHighlight.foreground2": "#66ff00",
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000",
  }
}

Upvotes: 15

Alex
Alex

Reputation: 67483

settings.json Ctrl+,

"editor.tokenColorCustomizations": {
    "textMateRules": [{
        "scope": "punctuation",
        "settings": {
            "foreground": "#ffffff"
        }
    }]
}

https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_textmate-theme-rules

https://www.sublimetext.com/docs/3/scope_naming.html

Upvotes: 30

ndonohoe
ndonohoe

Reputation: 10230

You can't directly change these colors (at least not easily) but you have a few options:

Pick a built in theme

Hit (Ctrl|Cmd) + K, T to open "Preferences: Color Theme" and select one one of the options, if you use the arrow keys to select the option it will give you a preview of the theme.

Install a marketplace theme

Press (Ctrl|Cmd) + Shift + X to open the extensions sidebar then enter category:themes if you select one of these results a readme will be displayed which will usually contain a screenshot.

Once you find one you like click install, then click reload. Once reloaded the theme or themes will be selectable through the "Preferences: Color Theme" command as detailed above

Install any TextMate theme

VSCode uses textmate themes of which there are many community shared ones available, see here

Create your own

You are also free to make your own TextMate themes, but they look rather complex and are probably more hassle than it is worth to just modify a few colors, you can find useful guides and even helpful tools with some quick google searches if this is what you want though.

Upvotes: 3

Related Questions