Vscode: Selection and selection matches highlight color

[klaidliadon]

It's really hard to tell which is the selected text and which are the selection matches.

[alexdima]

@bgashler1 @aeschli

The selection color comes from the monokai theme: rgba(73, 72, 62, 0.5);

The "selection matches" color comes from our css:

.monaco-editor.vs-dark .selectionHighlight {
    background-color: rgba(173,214,255,.15);
}

Should we dynamically compute the .selectionHighlight color starting off the theme selection color?

[bgashler1]

@alexandrudima sorry for my delayed response on this one. I think this raises an even more interesting question. Should we allow themes to modify the editor styles beyond what TextMate standards support?

What if when we convert TextMate themes to VS Code, we add a reference to boilerplate of additional customizations in either JSON or CSS (which are commented out by default). These customizations could include "selection matches" and other VS Code specific things. JSON would be the more conservative approach so that only specific values are further customizable and we don't open up the entire stylesheet to extensions.

Your approach above (computing the .selectionHilight) sounds like a good fix as well (and it's certainly easier and more conservative). I just wanted to throw out one more idea. What are your thoughts? Also, @stevencl what do you think?

[Tyriar]

The tmTheme editor I've used in the past allows specification of a selection color. Can that value be used?

<dict>
    ...
    <key>settings</key>
    <array>
        <dict>
            <key>settings</key>
            <dict>
                ...
                <key>lineHighlight</key>
                <string>#3E3D32</string>
                <key>selection</key>
                <string>#FFEA00</string>

[aeschli]

The lineHighlight from themes is already used, for the line highlight :-)

Adding vscode specific settings is a good option, the tmTheme format allows that. No need to change the theme format. However, as there are already hundreds of themes out there, we could also try to compute the missing color for all themes that don't define the new setting.
But how would we compute this? In this case, with the theme's selection color being gray we must know that we must rather something colorful to make a difference. But we must not conflict with any other highlights such as the find match and the work highlight. It's tricky.

[klaidliadon]

You could take the RGB difference between background and selection, and use a color that is something like:

• bg + diff/2
• bg - diff/2

or you could just make the text less lighter/darker of the background, if it's a match and not a selection.

[zkilgore]

@bgashler1 @alexandrudima I'm finding this to be a pretty big annoyance with my theme of choice (One Dark) during what has otherwise my favorite golang code writing experience to date. Is there a workaround/solution for this yet? @bgashler1, your idea of having user defined theme specific settings is pretty much exactly what I would hope for. And you could even make the default the computed value as a guide for the user.

[alexdima]

:+1: we should compute all colors from the theme or invent new theme keys and not have any default left overs when switching to a theme.

[bgashler1]

:+1: on computing colors as a default, but we should also allow theme creators to specify these values explicitly for the theme if they so desire.

[zkilgore]

@alexandrudima @bgashler1 That sounds awesome. Sensible defaults + the ability to customize via config would be sweet!

I'm not exactly sure how this would work as I haven't contributed to open source before, but is there anything with this issue that I could help with? I see that it's in the March milestones now, so does that mean that someone else has taken it on? If there is any way to contribute back to the project please let me know, I'd love to help out anywhere I can.

(Also, this might show my naiveté, but I assume because you guys both have the "Microsoft member" badge and have vscode right at the top of your repos contributed to that you either work there or are core contributors of some sort, which is why I'm asking you for some guidance in how to contribute. And if I am right about that let me also say thank you for this awesome editor!)

[Tyriar]

Keep in mind when implementing this that we want to support background color in tmThemes https://github.com/Microsoft/vscode/issues/3429

[conceptualspace]

+1

[mszczepaniak]

I would really love to see that. Miss the green higlight from notepad++. With gray the contrast is too low.

[desperate-man]

+1

[darekzak]

+1

[dannypule]

+1 please address this issue as it's a possible deal breaker for me

[DavidTheProgrammer]

+1 please please fix this.... it's killing me. Tried searching through a minified bootstrap css file and i can't find the matched text. It's horrible

[bgashler1]

The idea of computing colors is related to #9631

[varun-acintyo]

+1

[rivendare]

+1

[ypyf]

+1

[rogerpence]

+1

[hagata]

+1 🙌

[derekperkins]

🙏 Praying this makes it into the August milestone

[sandy081]

Extraction some non standard VS Code specific colors into TM themes is implemented here - #11095.

Next step is to compute a reasonable color if missing

[sandy081]

5c70d8d4b1f16ff642761b55279ec24ae9573533 - Implements computing of selection highlight color from background and selection color when selection highlight color is not provided in the theme.

A less prominent color (relative to selection color) is computed based on the contrast between selection and background color. When themes have very small or big contrasts then we fall back to our default selection highlight color.

Monokai theme is one such theme where it fall backs to our default. Since we have externalized selection highlight setting, themes can always contribute it if the computation and default colors are not fitting well for them.

[sandy081]

@bgashler1 Please verify this.

Please install various themes and verify only the computed / default selection highlight color.

[bgashler1]

@sandy081 I just talked to @Tyriar, and he showed me some potentially related problems. We probably need to do some work on this next milestone before we declare it finished. He'll reference another issue.

[Tyriar]

Created #11354, I don't think we should talk about the new tmTheme properties until we take a look at editor colors.

[ChuckJonas]

jesus, this is killing me... i've installed about 20 themes now and none of them have decent contrast around selection (other than the contrast theme, which otherwise is horrible)

can anyone suggest a theme that will allow me to see multiple selection vs highlights?

[arackaf]

Is there a reason the highlight color is simply customizable on its own? It seems that would solve these problems fairly simply: users could provide whatever color they want.

[Tyriar]

@ChuckJonas I've tried to optimize the highlight colors on my new theme Sapphire, there is a selection section on the theme readme. If it's no good I'd be interested in hearing the issue(s) with it https://github.com/Tyriar/vscode-theme-sapphire/issues/new

[efc]

+1 this problem makes the editor extremely difficult to use. Please let us override the selection color in some simple way.

[sntnmjones]

Any solution yet?

[efc]

Yes! The latest version of VS Code offers experimental settings that do the trick. Let's hope the stay. Here are a few of the choices, the autocomplete will suggest many others...

    "workbench.experimental.colorCustomizations": {
        "editorSelection": "#220815",
        "editorBackground": "#771835",
        "editorLineHighlight": "#771835",
        "editorCursor": "#F12360"
    },

Update: These ids have been changed and finalized, see https://github.com/Microsoft/vscode/wiki/Color-customization-color-id-changes

    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#220815",
        "editor.selectionBackground": "#771835",
        "editor.wordHighlightBackground": "#771835",
        "editorCursor.foreground": "#F12360"
    },

[sntnmjones]

Amazing! Thank you. :)

[Chillee]

Am I missing something? Is there any reason you can't simply modify the .tmtheme file for your theme? I saw somebody mention this above, but it didn't seem to have resolved the issue.

<key>lineHighlight</key> <string>#2a2a2a</string> <key>selection</key> <string>#5a5a5a</string>

Changing that selection value works fine for me. Or are people simply looking for some kind of solution integrated into vscode?

[Tyriar]

@Chillee the issue was closed off when the colors you mentioned (documented here) were added, I think @efc was just pointing out there's another way to do it now.

[efc]

Many themes do not incorporate these selection and caret colors. It is really helpful that VS Code now allows the user to specify these in settings so that theme choices (or non-choices) for these can be overridden universally. A few months back when I was experimenting, I found that many themes could not set these colors... maybe because there are at least two supported theming methods? Not sure, but I am sure these new user settings work, and that is great.

[dragoljub]

@efc is there any way to change the word or highlight selection foreground color? For example each match I want the font to go from white to black and have a yellow background.

[efc]

@dragoljub, I am not familiar with foreground color settings for matches. The full list of color customization settings is at https://github.com/Microsoft/vscode/wiki/Color-customization-color-id-changes.

[dragoljub]

It looks like the options is not available in VS code.

This is the kind of thing I'm thinking of. For match highlights in VS 2017 you can change the background highlight color and foreground font color to make it stand out even more.

[ivanbara]

As mentioned above, any chance that the foreground of the highlighted text could also be changed?

[indrayam]

I would also like to see if we can change the foreground of the highlighted text

[Piping]

Please add custom foreground and background color for text highlight.