Allow custom active search background colour

[marcusmichaels]

Hey folks 👋 – I'm hoping this is in the right area as it's a config/setting, but also related to theming.

I was really happy when search.match_background was shipped as it allowed me to properly see matches, however, it doesn't allow for the active match's highlight colour, and that still looks invisible on some themes such as SynthWave 84 Dark:

"theme": {
  "mode": "system",
  "light": "SynthWave 84 Dark",
  "dark": "One Dark"
}

Adding this helped to add some contrast to the search:

"experimental.theme_overrides": {
  "search.match_background": "#ff00f090"
}

But when cycling through each search the highlight essentially disappears due to lack of contrast (second Test is the active highlight):

I've searched the docs and can't seem to find anything that indicates that this is currently customisable (I would love to be proved wrong here!) so I'd like to raise this as a potential enhancement.

[mfkp]

ever figure this one out? just ran into the same issue

[marcusmichaels]

Not that I'm aware. I think better contrast has been released since I raised this issue which improves things a bit, but I mainly play with different themes to see what works best.

[mfkp]

I imported my favorite vscode theme to zed and after a few tweaks it's nearly there, but the search "active item" highlighting is the only major flaw I've found.

Example, searching for the word "match":

So it probably depends on the background color that you have set in the theme, but it definitely seems like something that should be able to be customized in the theme.

[marcusmichaels]

I've just checked, and I realise I haven't had this problem since using vim mode which appears to stop the highlighting, but that's not an ideal solution

[marcusmichaels]

@mfkp – I dug a bit deeper and added a potential solution here

[mfkp]

works great, you are the GOAT 👏

[marcusmichaels]

Okay, ultimately this is a selection highlight colour issue, where there's not enough contrast. So we can solve this in settings.json by overriding the search.match_background colour, and setting our own player's selection colour (this works for me using the SynthWave 84 Dark theme):

"experimental.theme_overrides": {
    "search.match_background": "#ff00f090",
    "players": [
      {
        "selection": "#FF00FF20"
      }
    ]
  }

[saegl5]

This issue may also be related to #1869 #1868

In the pull request, styles/src/styleTree/search.ts (line 30):
// TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive

[mtalexan]

There's another factor affecting this here too. If you're searching with either Vim or the search bar, the editor pane doesn't have focus so the editor contents change color for being inactive. This also affects the current line highlighting if you have that enabled (it's not shown when the pane doesn't have focus).

You can see the difference here if I search for " and set my search.match_background to something really obvious (#880000).

With editor pane selected:

With search bar selected:

Whatever is being applied to selections for the inactive state of the editor must have an alpha layer, so the value in the theme would have to be a 4-byte hex value instead of the usual 3-byte hex value. Only the player values support defining the alpha, and they only support cursor, background, and selection values, none of which could be applicable here.

So it seems there's likely a hardcoded "dimming" value in the code for anything that's a selection-like background and can't be set by the theme(?). It does appear to use the theme.mode to decide whether "dimming" means lightening or darkening at lest, but that's the source of the problems I'm experiencing: unable to tell which search match is currently selected.

[mtalexan]

Kind of figured out what's going on.

Apparently when the it goes into search match selection mode, it's not losing focus on the editor pane, it's just some different different visual mode. I confirmed this by doing a search, then switching to a separate split pane. The selection colors stay the same. But if you search: select next match, every search match suddenly changes color and stays that way until you drop the selection (escape, arrow keys to move without expanding selection, etc).

Also, the color shift is confirmed to be hardcoded and is actually a brightness inversion. If you pick a search match color that's very dark or very light, the search selection mode color for matches is equally the opposite extreme. Similarly, if you pick a search match color that's pretty close to the middle of the brightness range (i.e. #888888), the search selection mode color for matches doesn't change much at all.