Where to set the "matched brace" color?

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?

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.

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.

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.

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?

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);
}
2 Likes

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

8 Likes

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?

Yes, you can have a package that consists of nothing but stylesheets. For a while, my white-cursor package was that way.

Thanks, I’ll have a look at it :slight_smile:

You guys may like this package https://atom.io/packages/atom-like-brackets-editor

1 Like

Sarim, can you please guide where to find syntax theme’s stylesheet?

I tried to add yours snippet in
/Applications/Atom.app/Contents/Resources/app.asar/node_modules/one-dark-syntax/styles/syntax-variables.less

but it doesn’t change the style of brackets

I have it in
/Users/sarim/.atom/packages/twilight-textmate-syntax/index.less

I actually abandonned atom and went back to textmate long ago. Haven’t updated atom in ages, my installed version is 0.198.0. Not sure if this hack will work in latest versions.

Maybe you shouldn’t try to edit the app.asar, rather install a syntax theme module and then edit it like i did. Or have you checked both app.asar and app.asar.unpacked ?

1 Like

The shadow DOM is getting removed, so when that happens, you’ll be able to touch keyframes from styles.less.

1 Like

Does anyone know if there is any way to make the matching brace font weights bold?

1 Like

Hi Pockata,
May i know which theme are you using for your Atom Editor as shown in this picture.
I would like to know the name so that i can download. if it is customized by you then could you please forward me the custom code to my email sripal.jain@gmail.com
thanks and best regards
Jain

How do I activate this?
I’ve installed it in to my Atop by it doesn’t seem to highlight any of my braces.

Please show us exactly what you have done.

Finally figured this out! Add to scss.
.has-selection .highlights{z-index:0 !important}
.is-focused .highlights {z-index:1}
.bracket-matcher .region{background-color:rgba(255,0,0,.4);}

As expressed above, the reason we run into trouble with only one of the brackets highlighting is because the current line background-color is solid and in-front of the bracket-pair highlighter. The obvious thing to do would be:

.bracket-matcher .region{z-index:1 }

Which doesn’t work because it’s locked based on the parents z-level. Making the parent at z-level 1 doesn’t fix our problem either because it inadvertently makes to solid background color for selecting text appear over the text completely blocking out any selected text. My css at the top swaps the z-level of the parent based on whether we’re doing a highlight selection or a bracket selection and adjusts accordingly.

We can’t do anything fancy in terms of font weight/size/color because there is no actual text content in the .bracket-matcher .region.

1 Like

Finally figured this out! Add to scss.

    .has-selection .highlights{z-index:0 !important}
    .is-focused .highlights {z-index:1}
    .bracket-matcher .region{background-color:rgba(255,0,0,.4);}

As expressed above, the reason we run into trouble with only one of the brackets highlighting is because the current line background-color is solid and in-front of the bracket-pair highlighter. The obvious thing to do would be:

.bracket-matcher .region{z-index:1 }

Which doesn’t work because it’s locked based on the parents z-level. Making the parent at z-level 1 doesn’t fix our problem either because it inadvertently makes to solid background color for selecting text appear over the text completely blocking out any selected text. My css at the top swaps the z-level of the parent based on whether we’re doing a highlight selection or a bracket selection and adjusts accordingly.

We can’t do anything fancy in terms of font weight/size/color because there is no actual text content in the .bracket-matcher .region.