Hawk's By Design

A hop and a skip ago, I read an article over on David Walsh’s blog about colorized brackets.

Honestly, this is something I’ve never even considered, let alone wanted. It’s funny, because it’s a simple concept. In certain coding languages, for me that’d be CSS, PHP, and JavaScript mostly, there can be a ton of brackets. Brackets, brackets, brackets everywhere!

So…why not color coordinate them?

The Pros

Bracket Colorizer – SCSS Example

Though I never really paid much mind to it, I really do spend a good amount of thinking on matching up brackets. This especially becomes apparent in larger files that have lots of, or complex, conditions.

I never noticed how much time went into matching up the brackets, until I downloaded this plugin and realized how helpful it is. It’s almost like a subconscious thing. I’m finding it easier to match up brackets without even thinking about finding them. It’s kind of weird.

Bracket Colorizer – JS Example

The way the colors match, and the varying degree of colors based on your level of depth, make it incredibly simple to match up. If I glance at a screen, it’s very easy for me to pick out colors, and once I identify the colors, I’ve already matched the brackets.

It’s a weird, simple thing that I didn’t expect to be as effective as it is.

The Cons

If you are a hardcore believer in a color theme, then this plugin may not be for you. It can be a lot. It totally breaks any theme that you may have going, or may have meticulously set up. For me, it’s not that big of a deal, since it helps for the brackets to stand out, but I could see how some would not like it.

Another small con is opening extremely large files can have some lag time. If I accidentally pop open my compiled CSS or JavaScript file, there is a noticeable lag from the opening of the document to when the brackets get colored.


The only thing I can think of to improve upon this simple, yet amazing, idea would be to allow color customization. The plugin I’m using right now with Atom doesn’t allow you to customize the colors of the brackets. It would be cool to be able to change them based on their depth. This might also help with those that have a specific theme in their editor.

In The End

I feel like this is a super simple plugin that is available for a variety of text editors. This is a plugin that could help beginners as well as experts, as we all share the same struggle of trying to match up brackets.

Bracket colorizer packages for various text editors:

Thanks for reading

Some more articles for you


February 16, 2021

Toggling Element’s Focus Outline Based On User Interaction

The focus outline adopted by every browser is a powerful tool for keyboard accessibility. It also, however, can be kind of annoying.

View post


December 16, 2022

Determine if a YouTube video is region locked using YouTube Data API v3

I needed to know if a YouTube video was region locked... so I went down the rabbit hole and learned how to use the YouTube Data API.

View post