Where to set the "matched brace" color?


#1

When the cursor is inside a pair of braces, they highlight with a faint dotted light green line:

Where is this set, and how can I change it to something more easy to spot?


#2

You can check each element with the developer tools (ctrl + shift + I on Linux, not sure about other platforms) and apply the appropriate css classes in your stylesheet (ctrl + shift + P -> Open stylesheet).

Here is an example of my current matching bracket highlight. The image shows the actual code used for the green highlighting of the brackets.

Here is the actual code for easy copying.

.bracket-matcher {
    border-bottom: 1px solid lime;
    position: absolute;
    border: 1px solid rgba(0, 255, 0, 0.7);
    background-color: rgba(0, 255, 0, 0.3);
}

#3

Oddly, in 136 this code only highlights the opposite tag:

Even weirder, when Atom is in the background (like now, while Safari is in the foreground), both tags are highlighted as they were in earlier versions:


#4

I can’t reproduce what you’re seeing. I’m also on v0.136.0 and see this:

Edit: Yes, I know the style doesn’t match … but I double-checked and both divs are in the DOM and they both have the bracket-matcher class.


#5

Seems as though this code in my theme broke it. I commented it out, and it works now.

Not really sure why this would override it…

.editor.is-focused .line-number.cursor-line-no-selection, .editor.is-focused .line.cursor-line {
     background-color: #303030;
}

#6

I experienced the same issue. This problem appeared around the 0.125 update, though not sure about the exact version number.

The problem seems to be (or at least in my case) that the line highlight is positioned above the matching brace highlight, which both seem to be under the lines layer.

I fixed it by moving the brace highlight above the line highlight with z-index:

.editor-contents:not(.has-selection) .underlayer {
    z-index: 1;
}

The :not(.has-selection) part is important because without it, the selection layer gets drawn over the lines and that makes selecting text awkward.

Edit: Actually, I ran Atom with --safe and the issue is not there so it must be related to some plugin or my theme.


#7

Hi!

Do you know if is there some way to add style to the gutter in the line of the matched brackets/tags?

Thanks!


#8

In case anyone else finds this and, like me, has no idea where to update this – go to Settings | Packages, find the Bracket Matcher package, and then hit the “show code” button and update the .less file in that package.


#9

This is indeed a possible way to do it, but it has to be done again after every upgrade of atom


#10

The proper way to do this would be to add something like this to your styles.less:

.editor, atom-text-editor::shadow {
  .bracket-matcher {
    // style settings go here
  }
}

As a matter of fact, the proper way to override the style settings of any package is through your styles.less.


#11

Yeah I discovered that when I updated not long after posting that :smile:

Adding it to styles.less makes more sense, and that was the first thing I tried, but weirdly it did not work for me (and still doesn’t).

Edit: Okay, I missed the additional outer context from your example. Adding that fixed it for me. Thanks!


#12

Is there any update on this? I’m using Atom 0.174.0 and I’m having the issue where the cursor seems to override the bracket style. Any suggestions on how to fix this? It’s really annoying :imp:


#13

Ummm … update on what? :confused:

I re-read the whole topic and I don’t see anything that seems to correlate with what you’re talking about. Can you be more specific? Perhaps include a screenshot or animated GIF?


#14

Any updates on the matching brace color issue. Mine still doesn’t work correctly after trying the suggestions in this thread.

The cursor style is interfering with the bracket style.


#15

That looks like the highlight has a higher z-index than the bracket matcher. What happens if you add this to your ~/.atom/styles.less:

atom-text-editor::shadow .highlight .region {
  z-index: -100;
}

You might want to tweak the value to lower values, or try a different selector instead of .highlight.


#16

I am still struggling with this, months later. At this point, I’d only like to solve one issue:

I have atom-text-editor::shadow .bracket-matcher .region set to have an orange border-bottom and a yellow background.

When the editor is not focused (e.g. the tree is focused, or Atom is in the background) it works as expected:

However, once the editor has focus, putting the cursor in one bracket only shows the background on its match. The border bottom works on both, though.

Can someone please advise on what I need to do to hack this into working?

This has been this was for as long as I can recall, with several themes and syntax themes.


#17

I suspect what is happening is that the cursor-line highlight (implemented using a background color?) is overriding the bracket-matcher background color on the line that your cursor is on?


#18

Yes. I finally fixed it with this is styles.less

atom-text-editor::shadow  .bracket-matcher .region {
  border: 1px solid rgba(222, 149, 54, 0.6);
  border-radius: 3px;
  background-color: rgba(255, 217, 0, 0.3);
  z-index: 100;
}

and then, in my theme:

atom-text-editor.is-focused .line-number.cursor-line-no-selection, atom-text-editor.is-focused .line.cursor-line, :host(.is-focused) .line-number.cursor-line-no-selection, :host(.is-focused) .line.cursor-line {
    background-color: rgba(240, 240, 240,.5);
}

#19

Animated bracket highlight. More for fun than actual usage. Inspired from textmate :stuck_out_tongue:

image

Code:

@-webkit-keyframes bracketanimation {
  from  {
      border-width: 3px;
      border-color: rgba(222, 149, 54, 1);
      left: -3px;
      top: -2px;
  }
  50%   {
      border-width: 6px;
      border-color: rgba(222, 149, 54, 1);
      left: -3px;
      top: -4px;
  }
  to    {
      border-width: 1px;
      border-color: rgba(222, 149, 54, 0.5);
      left: 0px;
      top: 0px;
  }
}
.bracket-matcher .region {
    border-bottom: 0;
}
.bracket-matcher .region:after {
    content: "";
    -webkit-animation-name: bracketanimation;
    -webkit-animation-duration: .5s;
    border: 1px solid rgba(222, 149, 54, 0.5);
    border-style: solid;
    border-radius: 3px;
    background-color: rgba(255, 217, 0, 0.2);
    width: 100%;
    height: 100%;
    position: absolute;
}

Paste this into your syntax theme’s stylesheet, won’t work in your stylesheet, due to issue #4590


#20

Actually I do use it, it really helps me when I have to juggle intricated LaTeX code. Anyone know what would have to be done to turn it into a package? Can we patch themes in packages?