Can't change search result marker background?


#1

I’m not sure why this doesn’t change the background of the search markers:

  :host {
    .search-results .marker .region {
        background-color: magenta;
        border: 1px solid @syntax-result-marker-color;
    }
}

This is inside :host but even if I pull it out it still doesn’t work, so I assume I’m just using the wrong property.


#2

Where are you putting this style override? If you’re putting it in styles.less, :host won’t work. Also, it appears to be .find-result. This worked for me:

.editor, atom-text-editor::shadow {
  .find-result .region {
    background-color: magenta;
    border: 1px solid @syntax-result-marker-color;
  }
}

#3

I was trying to put it into a theme. Is atom-text-editor::shadow correct there? (It works, I just don’t know if I should be using something different there.)


#4

Edit: This is no longer correct.

It depends if it is a UI theme or a syntax theme. If it is a UI theme, then the stylesheets are loaded by default outside the Shadow DOM and atom-text-editor::shadow is the correct way. If it is a Syntax theme, then the stylesheets are loaded by default inside the Shadow DOM and :host is the correct way.


#5

It’s a Syntax theme, which unless I’m reading your last post incorrectly, means that my original post should work fine, correct?

–oh, except I was using .search-results .marker not .find-result.


#6

Well, I’m still not sure which is supposed to work. This is a Syntax Theme.

:host {
    .find-result .region {
        background-color: magenta;
        border: 1px solid @syntax-result-marker-color;
    }
}

does not work, but

atom-text-editor::shadow {
    .find-result .region {
        background-color: magenta;
        border: 1px solid @syntax-result-marker-color;
    }
}

does.

This seems to be the opposite of what you said in your last message (and how I understand things to work as well).


#7

Yep, you’re right. I just tested it on my own syntax theme and I can confirm that atom-text-editor::shadow is the one that works. I guess they made all the stylesheets load the same way.

Edited my earlier post to show that it is inaccurate.