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
userEnvvariables 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
.tmThemefiles 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. findHighlightis 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
selectioncolor from theme - All symbol and word highlights are
selectioncolor 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 Related StackOverflow Question
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
thisis selected while the others are highlighted. It’s just impossible for me to know when I selected something