Please improve contrast on text selection

[Meligy]

Make sure to use the latest version of the theme before adding a report. ✅ v0.3.0 Describe the bug I would like the text selection background to be a bit easier to distinguish.

Here I searched for "workbench", selected "Pastel":

Now with the same selection, I just hovered over the closing double quote of the string value:

Another example, this time selecting "centeredLayoutAutoResize":

More examples:

Selecting "get":

(It's worth noting that the contrast looks more obvious in the screenshot than on real screen for some reason)

Selecting "the":

Extra information:

• VS Code version: [e.g. 1.74] 1.86.0-insider
• Language and/or file extension: [e.g. .jsx] I see it in JSON, TypeScript, C#. It's probably not language specific
• All relevant used extensions and their versions: [e.g. rust-analyzer v0.4.12] Not sure if any extensions are relevant to this specific issue

If you can think of any other relevant information to help find and fix the bug quickly, please add it.

Again: It's worth noting that the contrast looks more obvious in the screenshot than on real screen for some reason. So, I struggle more using the screen than it seems in them.

[Meligy]

Using the template, I forgot to first say thanks a lot for the great theme.

I have found very few extensions other than the one that ships with the C# extension (not even the VS Code default ones) to have a proper highlighting of interfaces vs classes etc.

[kaiusl]

I see what you mean but I'm not quite sold on changing it at the moment. The selection background was meant to be relatively subtle.

However you can always change the colors to your liking through "settings.json". To change the selection background add the following lines with any color (ones in the snippet are the default ones):

"workbench.colorCustomizations": {
    "[Pastel Evening Dark]": {
        "editor.selectionBackground": "#324454ff",
        "editor.inactiveSelectionBackground": "#2b3947ff",
    }
},

[Meligy]

Thanks for the guidance.

As I report this, I realise there are 2 different issues here:

1. How the selection is subtle, which can be argued whether it's a bug or a matter of taste. That was my intended purpose of the issue.

2. How the selection color matches the hover effect of many other tokens. Like a reference match or a string highlight.
   See the 2nd picture in my issue. Here's another recreation: You can't tell that I only selected the first word of the string ("Pastel").
   Another example: In this example, I selected Extensions in settingsSync.ignoredExtensions. I also hovered over hediet.vscode-drawio.theme without a selection.

[Meligy]

Side note:

The "FF" at the end of editor.inactiveSelectionBackground triggered a warning from VS Code:

Changing it to even "FE" makes the warning goes away, but I was not able to test it anyway.

Not saying it's something bad or anything. Just thought you'd want to know it's a thing!

Thanks again.

[kaiusl]

2. How the selection color matches the hover effect of many other tokens. Like a reference match or a string highlight.

Ah, that's indeed an issue. I'll try to figure something out for them. Meanwhile if you want to change it yourself the relevant keys to modify are

"workbench.colorCustomizations": {
    "[Pastel Evening Dark]": {
        "editor.wordHighlightStrongBackground": "#324454ff",
        "editor.wordHighlightBackground": "#324454ff",
        "editor.hoverHighlightBackground": "#324454ff",
        "editor.symbolHighlightBackground": "#324454ff",
        "editor.selectionHighlightBackground": "#324454ff",
        "editor.rangeHighlightBackground": "#324454ff",
        "editor.findRangeHighlightBackground": "#324454ff",
        "editor.focusedStackFrameHighlightBackground": "#324454ff",
        "editor.snippetTabstopHighlightBackground": "#324454ff",
        "editor.stackFrameHighlightBackground": "#324454ff",
        "editor.snippetFinalTabstopHighlightBackground": "#324454ff",
    }
}

[kaiusl]

Side note:

The "FF" at the end of editor.inactiveSelectionBackground triggered a warning from VS Code:

Changing it to even "FE" makes the warning goes away, but I was not able to test it anyway.

Not saying it's something bad or anything. Just thought you'd want to know it's a thing!

Thanks, hadn't noticed that before. The property description says: "Color of the selection in an inactive editor. The color must not be opaque so as not to hide underlying decorations." but on a quick test I couldn't see the decorations disappearing. Nonetheless probably should change the color to something non opaque in future versions.

[kaiusl]

New v0.3.1 released which fixes the opaque selection colors and conflicting selection and editor highlight colors. The selection color itself remains roughly as it was.

[Meligy]

Thanks a lot.