Background color of the selected text in the Extensions panel and Settings page is almost indistinguishable

[Z-E-D]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.65.0
• OS Version: Windows 7

Steps to Reproduce:

1. choose Default High Contrast theme
2. open the Extensions panel
3. type any text in the text box, e.g. "javascript"
4. select a part of that text -> the background color is very dark and hardly indistinguishable from the black background of the text box.

The same problem is with the selected text in the top text box on the Settings page. However, the text boxes in the Search panel and Find widget have different and more prominent background color of the selected text.

This is not problem only with that theme, there are others with the same problem: Kimbie Dark, Monokai, Monokai Classic, Github Dark Colorblind/Default/Dimmed, One Dark Pro...

I tried to override the background color of the selected text with the Default High Contrast theme that I am using with: "selection.background": "#ff0000"

but the background color of selected text in Extensions/Settings is still much more darker than that in the Search/Find text boxes.

[sandy081]

Both these components use SuggestEnabledInput and not sure who owns this widget.

CC @alexdima

[Z-E-D]

Dark High Contrast: Extensions: Settings: Search: Find:

"selection.background": "#008000"

This theme is somewhat better, but still has different selected background colors, with Extensions/Settings being much darker than Search/Find: Red: Extensions: Settings: Search: Find: "selection.background": "#ff777788",

This theme is strange one since it has different selected background colors, not only darker: Abyss: Extensions: Settings: Search: Find: It doesn't have "selection.background" in its theme's json. Its Search/Find color is "#0562d5" which is nowhere found in its .json, so I suppose it is a default one, but the Extensions/Settings has the selected background color which is the same as: "editor.selectionBackground": "#770811,"

Why should Extensions/Settings selected background color have the same color as the selected background text in the editor? Shouldn't it be the same as the selected background color of the Search/Find text boxes? If theme doesn't have defined "selection.background", the Extensions/Settings should have default color as Search/Find, not the color from editor.

[roblourens]

This is discussed in a few old issues, like https://github.com/microsoft/vscode/issues/75012. Basically we are trying to mimic a native text input with an editor control for some inputs that use editor features. But we can't get it perfect. The entirely different colors come from the fact that the blue is a platform-specific color, it's completely different on Mac, and the editor doesn't use that color. I'll leave this open to look at again, it's especially bad in the high-contrast theme.

[Z-E-D]

I don't want to pretend that I understand how VSCode internally works. I am just curious, if you don't mind to explain, why Extension/Settings text boxes are not created as Search/Find boxes with a native text input? I would expect that Search/Find would require editor features more than Extensions/Settings, not otherwise, but I am just beginner with VSCode, so please forgive my ignorance.

Anyway, within the function registerThemingParticipant in the file vs\workbench\contrib\codeEditor\browser\suggestEnabledInput\suggestEnabledInput.ts I changed: selectionColor.transparent(0.4) to: selectionColor.transparent(1) and now the selected background color of the Extensions/Settings is much more prominent. When the theme has defined "editor.selectionBackground", it would have the same colors in Extensions/Settings as Search/Replace (i.e. they are not darker). However, when the theme doesn't have that setting defined, then the selected background color will be the same as the selected background of the text in editor. Which is not perfect, but it is better than before, IMHO.

Could you please check my modification. As I said, I am just starting with VSCode, so maybe I am doing something wrong.

Dark High Contrast:

Red:

[roblourens]

It uses an editor because it has a suggest widget pop up to help with some queries.

From my memory, that might work with some themes/color combinations, but not others. I picked 0.4 as a compromise. I haven't looked at this in a long time though, maybe a different number will be better now. This is also different across OS as I recall.

[Z-E-D]

The modification works fine with all themes that I tried. I don't understand what OS has with it since it is applied to the "editor.selectionBackground" color defined by theme.

Also, I don't see the point to apply transparent(0.4) to the background color if it defined by theme, but not to apply it if it is not defined by theme in which case it has the same value as the editor selected background color.