Set Colour Of Bracket and Matched Bracket


#1

Is there any way to style the colour of the selected bracket/brace and the matching bracket. At present there is a green dotted border bottom only below the matched bracket. I would like both brackets to be green as happens here.

I have found various thread on setting background colour, but I’ve had no luck translating them into setting the colour of the braces.


#2

The selector for that is:

.bracket-matcher .region {
    // your styles here
}

Add it to your user stylesheet (.atom/styles.less).


#3

Thanks, but the .region element does not contain the bracket. It only
represents a highlight behind the bracket and is on a separate branch of
the DOM tree from the bracket itself.

Your selector does target the highlight and enables you to change the
colour behind the bracket, but offers no way to change the colour of the
bracket itself.


#4

You can change the color of all the brackets with .syntax--bracket.

I do not think there is a way to change the color of the highlighted bracket itself because as far as the Atom DOM is concerned, that’s not changing whether it’s highlighted or not.

It’s just being overlaid with a .highlight .region. Linting and selection regions work the same way, they’re overlays.

You could experiment with mix-blend-mode and see if the overlay color can somehow affect the look of the brackets, but they’re experimental and have limited compatibility in Atom.


#5

Actually, I stand corrected! You can hack your way around it. Try this:

background: lime; // or any green
mix-blend-mode: darken; // works well with a dark background
mix-blend-mode: lighten; // works well with a light background

#6

Nice thinking, but that won’t work as the highlight is behind the bracket, not in front.


#7

You can use z-index.
It’s set to -1 by default, I believe. Set it to 1 or even 100 and see what it does.

Edit:

background: lime; // or any green
// choose one of these mix-blend modes
mix-blend-mode: darken; // works well with a dark background
mix-blend-mode: lighten; // works well with a light background
z-index: 1; // brings the highlight above the text

#8

The highlights like .bracket-matcher .region are on a different layer behind the actual glyphs, this is correct. This is something that Atom does for performance reasons. The way Atom is currently architected, there isn’t a way to color the glyphs themselves using the decorations, only add stuff behind or in front of them.


#9

@leedohm Thanks for the clarification.