[Solved] How to change Project Find Results highlight colour


#1

I’m looking at changing the highlight colour of the Project Find Results tab. Currently the selected item has a blue highlight for the entire line. The problem is the text is grey which makes it unreadable. The only readable text is the actual searched for term as that is in another colour. I’m trying to play around in the syles.less file, but I can’t find the proper field to change this blue colour.

edit: In my playing around I got the following to highlight all other results as yellow, but the selected result still remains blue. I just want to change the selected result, not the others.

.search-result {
background-color: yellow;
}

edit: Also, where are these terms defined? I can’t find documentation anywhere. All I can find is posts about specific issues, but nothing outlines what search-result is and how to control it.


#2

They are defined in the DOM (ie. you’ll just have to inspect it directly with dev tools). People who answer these specific questions just happen to know what to look for (from experience mostly).

It would be nice if we had a list of common selectors though, like selected text


#3

They’re defined by the package creating the HTML element, in this case find-and-replace. You can view the default styling for the package at its repo.

If you look at that document, you’ll see that there are no actual color codes. That’s because all of the colors used by find-and-replace, as well as most core packages, are determined by your UI and syntax themes. If the highlight color isn’t easily distinguished from the standard text color, it may be that your theme was not tested on find-and-replace when it was created.


#4

Thanks for the tip. I didn’t realize atom had a Chrome like interface. I was able to find what I was looking for. I added the following to my styles.less file in order to change the highlight colour. There’s probably a bit of extra junk not needed, but I just took what the tool gave me.

.list-group li:not(.list-nested-item).selected:not(.header)::before, .list-tree li:not(.list-nested-item).selected:not(.header)::before, .list-group li.list-nested-item.selected > .list-item:not(.header)::before, .list-tree li.list-nested-item.selected > .list-item:not(.header)::before {
	background-color: #663399;
}