How to change find and replace highlight color?


#1

I would like to change the color of matching words when I use Find and Replace. I tried this trick mentioned here but no luck. Any help is appreciated.

Here is my screenshot and stylesheet.

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

.tree-view {

}

// style the background and foreground colors on the atom-text-editor-element
// itself
atom-text-editor {

}

// To style other content in the text editor's shadow DOM, use the ::shadow
// expression
atom-text-editor::shadow .cursor {

}

.search-result .match.highlight-info {
  background: yellow;
}

#2

Use this instead:

atom-text-editor::shadow .highlight.find-result .region {
  background: yellow;
}

change the .find-result part for other highlights, or remove it for all highlights. Note that this doesn’t work for text color because the text isn’t inside the highlight element


#3

Thank you very much.


#4

So this works for me, but when I’m moving through my .find-result matches the one I’m on goes back to the unseeable black highlighting. How do I change the highlighting color of the specific .find-result instance that I am looking at? (Sorry if I worded that poorly)


#5

In that case, you should also add a rule for the .current-result class:

atom-text-editor::shadow .highlight.find-result .region {
  background: yellow;
}
atom-text-editor::shadow .highlight.current-result .region,
atom-text-editor::shadow .highlight.current-result ~ .highlight.selection .region {
  background: orange; // to distinguish from the other results
}

The line with the ~ is there because the .selection highlight might be rendered on top of the .current-result highlight


#7

The background: yellow; highlight effect here seems to cover the text itself. In addition, how can I change the actual text color?

Thanks!


#8

Try adding a z-index: -100000; below the background: yellow;. Does that work?


#9

Yes, the background is now below the text, although due to theme colors it can be difficult to make out what the text is. How can I change the text color for the matches, and current result? Thanks!


#10

I’m afraid that’s not currently possible with CSS. Possibly you could write some JavaScript to catch the matched text and put it in the highlight elements. Then you could style the color property of the highlights. I don’t know if this is currently possible, though.


#11

ah, ok. Thanks for the quick responses!

I have noticed that when cycling through the matched results, when a matched result becomes the current result, the background is not always applied. Then when cycling to the next matched result, the previously un-highlighted current result flashes the correct background for a split second.


#12

I think that has to do with -100000 being too low for the z-index. The .highlight.selection was getting rendered on top of the .highlight.current-selection and had a solid background set (at least for me it did). The following worked fine:

atom-text-editor::shadow .highlight {
  &.find-result .region,
  &.current-result .region,
  &.current-result ~ .highlight.selection .region {
    z-index: -1;
  }

  &.find-result .region {
    background: yellow;
  }

  &.current-result .region,
  &.current-result ~ .highlight.selection .region {
    background: orange;
  }
}

#13

Cheers - this fixed it!


#14

I’m getting a deprecation cop message: > Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax–.

I’d appreciate an update as I have no idea what this means. Thanks!


#15

Just remove the ::shadow. I checked, and none of the find and replace CSS has syntax-- attached to it.


#16

Works, thanks!