Editor selection colors should be simplified
See original GitHub issue- VSCode Version: Code - Insiders 1.5.0-insider (1de4d832ccb061c13cf70eaf0221fbaa86abfbdd, 2016-08-31T06:16:16.953Z)
- OS Version: Linux x64 4.4.0-36-generic, Ubuntu 16.04
Follow up from #1636
I think we need to take a step back and take a good look at editor selection colors. Currently there are so many states, it’s very confusing as to what find match, selection match is what and even what the actual selection is.
Here are some of the states using my theme Glacier:
Selection Find match Symbol match Selection match (lighter than word match) Selection + selection match Selection + find match + symbol match Symbol highlight “Strong” symbol highlight for cursor word “Strong” symbol highlight for words away from cursor Selection + “Strong” symbol highlight for cursor word Selection + “Strong” symbol highlight for cursor word (when selecting via <kbd>ctrl</kbd>+<kbd>d</kbd>) Selection + “Strong” symbol highlight for cursor word (when selecting via <kbd>ctrl</kbd>+<kbd>d</kbd>) + Find match
This is in no way an exhaustive list of states but I think it gets the point across. Here are some of my initial thoughts:
- The actual selection should always be the selection color defined in the theme - this is the primary reason I sometimes lost my selection.
- Find matches should not use the selection color defined by the theme.
- Some of these states have colors that differ by so little they lose information and make the UI look sloppy. We should reduce the number of possible colors by reducing the amount they can stack with each other.
- Is it useful differentiating symbol highlight and selection highlight?
- Is strong symbol highlight useful? We already have a color to indicate symbols and they can’t both show at once.
-
I’m quite perplexed by it, especially when things like this happen:
Why are both
userEnv
variables highlighted with the strong symbol highlight below but not above? -
The blue looks bad in my theme, is there a way we can get a more suitable color using existing colors?
-
- The line highlight color doesn’t work when a range is selected.
- Can we use a border to indicate find matches or something? That would make the distinction very clear.
- Since 95% of themes are just imported from Sublime
.tmTheme
files and not adjusted to work better with vscode, we should make an effort to have the defaults work and only add additional tmTheme properties if they are absolutely necessary. findHighlight
is defined in many themes, why don’t we adopt that since Sublime uses it?
Personally I think something like below would be more usable despite being so simple (this is to illustrate my point, I’m not proposing this):
- Selection is always the
selection
color from theme - All symbol and word highlights are
selection
color at 50% opacity - Find matches use white with 50% opacity
Issue Analytics
- State:
- Created 7 years ago
- Reactions:11
- Comments:14 (7 by maintainers)
Top GitHub Comments
any update? How about use border with match select like atom?
Is there a way for disabling selection matches for the time being? I started using VS code today and it’s possible to distinguish my selections. In this screenshot the first
this
is selected while the others are highlighted. It’s just impossible for me to know when I selected something