Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selection and selection matches highlight color #1636

Closed
klaidliadon opened this issue Dec 24, 2015 · 44 comments
Closed

Selection and selection matches highlight color #1636

klaidliadon opened this issue Dec 24, 2015 · 44 comments
Assignees
Labels
bug Issue identified by VS Code Team member as probable bug themes Color theme issues verified Verification succeeded
Milestone

Comments

@klaidliadon
Copy link

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

@bpasero bpasero changed the title Selectton and selection matches highlight color Selection and selection matches highlight color Dec 24, 2015
@bpasero bpasero added the bug Issue identified by VS Code Team member as probable bug label Dec 24, 2015
@bpasero bpasero added this to the Backlog milestone Dec 24, 2015
@alexdima
Copy link
Member

@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
Copy link
Contributor

@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
Copy link
Member

Tyriar commented Feb 3, 2016

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
Copy link
Contributor

aeschli commented Feb 4, 2016

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
Copy link
Author

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
Copy link

zkilgore commented Mar 8, 2016

@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
Copy link
Member

alexdima commented Mar 9, 2016

👍 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.

@alexdima alexdima modified the milestones: March 2016, Backlog Mar 9, 2016
@bgashler1
Copy link
Contributor

👍 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
Copy link

zkilgore commented Mar 9, 2016

@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
Copy link
Member

Tyriar commented Mar 11, 2016

Keep in mind when implementing this that we want to support background color in tmThemes #3429

@alexdima alexdima modified the milestones: April 2016, March 2016 Mar 17, 2016
@alexdima alexdima modified the milestones: May 2016, April 2016 Apr 29, 2016
@alexdima alexdima modified the milestones: Backlog, May 2016 May 25, 2016
@conceptualspace
Copy link

+1

@mszczepaniak
Copy link

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

@metabacalhau
Copy link

+1

1 similar comment
@darekzak
Copy link

+1

@dannypule
Copy link

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

@DavidTheProgrammer
Copy link

+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 bgashler1 modified the milestones: August 2016, Backlog Aug 5, 2016
@hagata
Copy link

hagata commented Aug 26, 2016

+1 🙌

@derekperkins
Copy link

🙏 Praying this makes it into the August milestone

@sandy081
Copy link
Member

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
Copy link
Member

5c70d8d - 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
Copy link
Member

sandy081 commented Aug 29, 2016

@bgashler1 Please verify this.

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

@bgashler1
Copy link
Contributor

@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
Copy link
Member

Tyriar commented Aug 31, 2016

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

@joaomoreno joaomoreno added the verified Verification succeeded label Sep 2, 2016
@ChuckJonas
Copy link

ChuckJonas commented Jan 27, 2017

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
Copy link

arackaf commented Feb 14, 2017

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
Copy link
Member

Tyriar commented Feb 14, 2017

@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
Copy link

efc commented Mar 24, 2017

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

@sntnmjones
Copy link

Any solution yet?

@efc
Copy link

efc commented Apr 13, 2017

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
Copy link

Amazing! Thank you. :)

@Chillee
Copy link

Chillee commented Apr 15, 2017

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
Copy link
Member

Tyriar commented Apr 17, 2017

@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
Copy link

efc commented Apr 18, 2017

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
Copy link

@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
Copy link

efc commented May 23, 2017

@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
Copy link

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.

image

@ivanbara
Copy link

ivanbara commented Aug 2, 2017

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

@indrayam
Copy link

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

@Piping
Copy link

Piping commented Sep 17, 2017

Please add custom foreground and background color for text highlight.

@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 17, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue identified by VS Code Team member as probable bug themes Color theme issues verified Verification succeeded
Projects
None yet
Development

No branches or pull requests