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?

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

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

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

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

Answer 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