Make the background for found matches transparent

[Arnesfield]

I have this extension installed called TODO Highlight that highlights some annotations within the code.

Here is an example with the highlights without any found matches:

Now, after doing ctrl+f and finding via regexp "text": ".*?", it becomes:

This completely removes the highlighting as the background colors for found matches are not transparent. This background color is currently: #444a73

I checked the colors from the theme and saw #444a73bb. So I tried it and it works since it's transparent, but now the found match background is slightly darker than before (because it's transparent). What I wanted was a color that would still be #444a73 but is transparent (with bb) so that the highlights aren't hidden.

I played around with the npm package color and with some trial and error, I was able to get the transparent color (against the default editor.background color which is #222436). Here is the code I used:

import Color from "color";

const ratio = 0.18 + 0.001 * 10;
const color = Color("#444a73").lighten(ratio);
const hex = color.hex().toLowerCase() + "bb";
console.log(hex);

The resulting color hex is #515889bb that I then use for my settings:

"workbench.colorCustomizations": {
  "[Moonlight II]": {
    // background for #222436
    "editor.findMatchBackground": "#515889bb",
    "editor.findMatchHighlightBackground": "#515889bb",
    "editor.selectionHighlightBackground": "#515889bb"
    // background for #1e2030
    // "editor.findMatchBackground": "#52598cbb",
    // "editor.findMatchHighlightBackground": "#52598cbb",
    // "editor.selectionHighlightBackground": "#52598cbb"
  }
}

Here is what it looks like now with the highlighted texts:

The background colors for the found matches still look like #444a73 with the #222436 editor background, but is now transparent for highlighted texts.

My suggestion is to use the transparent color #515889bb for the found matches background colors (editor.findMatchBackground and editor.findMatchHighlightBackground).

As an aside, I customized my editor background to #1e2030 and I've included the found match background color for that as well in the previous code block that would still look like #444a73.

Hope this gets addressed as this kinda affects the experience with other extensions. Thanks for the theme!

---

EDIT: As an addition, looks like the editor.selectionHighlightBackground setting also needs to be set.

Selecting the line like below highlights other similar lines like so:

Setting editor.selectionHighlightBackground with the similar transparent color would look like this: