How to change style of matched brackets in Sublime Text 2 / 3?

Question

It's just underlining the matched brackets, Is it possible to make it more useful like changing brackets colour or highlighting the line of brackets?

Solution 1

there is plugin BracketHighlighter

features:

• Customizable highlighting of brackets (),[],<>,{}
• Customizable highlighting of Tags (supports unary tags and supports self closing /> (HTML5 coming))
• Customizable highlighting of quotes
• Selectively disable or enable specific matching of tags, brackets, or quotes
• Selectively whitelist or blacklist matching of specific tags, brackets, or quotes based on language
• When using on demand shortcut, show line count and char count between match in the status bar
• Shortcuts for moving cursor to beginning or end of bracketed content (will focus on beginning or end bracket if not currently multi-selecting)
• Shortcut for selecting all of the bracketed content
• and others, see the github site.

Solution 2

You can change the color of the brackets modifying your theme's color scheme file.

Go to Preferences / Browse packages open folder Color Scheme - Default find out your current theme file (default's Monokai.tmTheme). Open it using Sublime Text and find the following part:

<key>bracketsForeground</key>
<string>#F8F8F2A5</string>
<key>bracketsOptions</key>
<string>underline</string>

<key>bracketContentsForeground</key>
<string>#F8F8F2A5</string>
<key>bracketContentsOptions</key>
<string>underline</string>

Here you can change the appearance of your brackets. If you change it to something like this:

<key>bracketsForeground</key>
<string>#FF8000</string>
<key>bracketsOptions</key>
<string>foreground</string>

<key>bracketContentsForeground</key>
<string>#FF8000</string>
<key>bracketContentsOptions</key>
<string>foreground</string>

..you'll remove the underline and add an orange color to your brackets.

Take a look to the rest of the file because (maybe) you'll find something more to change ;)

There's no need to restart sublime to see the changes. Just save the file.

Update for Sublime Text3

1. Go to your Sublime Text 3 installation folder; cd into "Packages" folder. Search for Color Scheme - Default.sublime-package and copy-paste it into your Packages folder (under windows is %APPDATA%\Sublime Text 3\Packages).
2. Decompress the file (with any unzip tool).
3. Access the new generated folder and modify your theme's file (same steps as in Sublime Text 2).
4. After applying your changes save the file and you'll see your changes.
5. If you want, you can compress again the file as zip using .sublime-package extension but if you do so you must move that file to Installed Packages folder.

Update 2

There's a very usefull package for editing plugins named PackageResourceViewer. It allows you to edit packages very easily, doing all the decompress & move stuff for you.

Solution 3

Bracket color & other visibility preferences can be modified without the use of a plugin.   Below is a method for implementing such changes natively.

Note: I recently drafted this answer @ the SublimeText Forum.   There is a similar (unaccepted) answer here, but I have included some unmentioned details & visual reference.

---

EXAMPLE

This is my personal configuration:

---

SETTINGS

Below are all of my visibility related settings.

As you can see in the examples: brackets settings dictate the color of bracket pairs if a caret is placed ON a bracket, whereas bracketContents settings dictate the color of bracket pairs if a caret is placed WITHIN a set of brackets.

My bracketContentsOptions is set to underline, but you can change it to foreground if you want it to be highlighted during both instances.

 

@ Preferences.sublime-settings

"always_show_minimap_viewport" : true,
"caret_extra_bottom"           : 3,
"caret_extra_top"              : 3,
"caret_extra_width"            : 1,
"caret_style"                  : "phase",
"draw_minimap_border"          : true,
"fade_fold_buttons"            : false,
"fold_buttons"                 : true,
"highlight_line"               : true,
"highlight_modified_tabs"      : true,
"line_numbers"                 : true,
"match_brackets"               : true,
"match_brackets_angle"         : true,
"match_brackets_braces"        : true,
"match_brackets_content"       : true,
"match_brackets_square"        : true,
"match_selection"              : true,
"match_tags"                   : true,
"overlay_scroll_bars"          : "enabled",

@ YourColorScheme.tmTheme

    <!-- Indent Guides -->

        <key>guide</key>
        <string>#14191F</string>

        <key>stackGuide</key>
        <string>#14191F</string>

        <key>activeGuide</key>
        <string>#2E4589</string>

    <!-- Highlighted Brackets -->

        <key>bracketsForeground</key>
        <string>#D80E64</string>

        <key>bracketsOptions</key>
        <string>foreground</string>

        <key>bracketContentsForeground</key>
        <string>#D80E64</string>

        <key>bracketContentsOptions</key>
        <string>underline</string>

    <!-- Document Selection -->

        <key>caret</key>
        <string>#D80E64</string>

        <key>lineHighlight</key>
        <string>#121522</string>

        <key>selection</key>
        <string>#1D416B</string>

        <key>selectionForeground</key>
        <string>#bbccff</string>

        <key>selectionBorder</key>
        <string>#4D71FF</string>

        <key>inactiveSelection</key>
        <string>#1D416B</string>

        <key>inactiveSelectionForeground</key>
        <string>#bbccff</string>

    <!-- Search Results -->

        <key>findHighlight</key>
        <string>#0BD0AC</string>

        <key>findHighlightForeground</key>
        <string>#000000</string>

Solution 4

With BracketHighlighter package, edit your theme (tmTheme), and add:

    <dict>
        <key>name</key>
        <string>Tag</string>
        <key>scope</key>
        <string>brackethighlighter.default</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#ffff00</string>
        </dict>
    </dict>

Solution 5

<dict>
    <key>name</key>
    <string>Tag</string>
    <key>scope</key>
    <string>meta.tag, declaration.tag</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#0033CC</string>
    </dict>
</dict>

This changes bracket colors in sb3

View more solutions

Comments

[elboletaire]

The background color of the brackets? I don't know if there is an option for this... maybe the plugin can? I don't know.. I've not tested it.

[mmoya]

Such a file doesn't exist in Sublime Text 3. I'm using Soda (git checkout) and missed the Bonus Options but now I've downloaded it and the Monokai Soda.thTheme doesn't have any string containing bracket.

[elboletaire]

Well.. the question is about Sublime Text 2... Edit: anyway.. have you tried adding the mentioned section??

[svassr]

There was no bracket string neither in my Packages/PHP-Twig/Extras/Themes/Monokai Dark.thTheme but adding these missing blocks did it.

[noitseuq]

Here's the forum thread that discusses meaning of mentioned theme params: sublimetext.com/forum/viewtopic.php?f=2&t=3007#p14196

[treecoder]

But I need to change them ONLY when highlighting them -- that is, exactly the moment they get an underline.

[appostolis]

@svassr where exactly did you add the code? anywhere inside the <array></array>? thanks

[elboletaire]

@appostolis yes, add it anywhere as a direct child of <array></array>.

[DoTheEvo]

Works nicely, but is it possible to have also boldness added? <key>fontStyle</key> <string>bold</string> added under the color will affect everything, not really sure what tells the color scheme to change the color only on the active brackets

[Ozkan]

Is there simiral plugin to do the same for search result highlights?

[Klaider]

It didn't work. :'( There were no "brackets" string, so I added the brackets options inside a dict. What is wrong?

[Adam Mendoza]

This needs a bit more explanation to be able to edit the theme file

[Cyrcle]

I tried BracketHighlighter, but like most things on MacOS, it sucked. It had a very limited range of how far it would match brackets.