Repository: vscode
Issue: Editor selection colors should be simplified
Labels: feature-request,editor-theming

- 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](https://marketplace.visualstudio.com/items?itemName=Tyriar.theme-glacier):

![image](https://cloud.githubusercontent.com/assets/2193314/18149502/4d7a8d04-6f95-11e6-8726-a4df8ee95627.png) Selection
![image](https://cloud.githubusercontent.com/assets/2193314/18149492/32a2bbe6-6f95-11e6-985b-d2de3a32ed5a.png) Find match
![image](https://cloud.githubusercontent.com/assets/2193314/18149524/765a9340-6f95-11e6-94a6-9d916a2af65a.png) Symbol match
![image](https://cloud.githubusercontent.com/assets/2193314/18149531/8b5d273a-6f95-11e6-9096-b713c7f04233.png) Selection match (lighter than word match)
![image](https://cloud.githubusercontent.com/assets/2193314/18149574/ca1a92d2-6f95-11e6-90d9-31c18dbab87d.png) Selection + selection match
![image](https://cloud.githubusercontent.com/assets/2193314/18149882/e9ed2942-6f97-11e6-912c-0638a2225c4a.png) Selection + find match + symbol match
![image](https://cloud.githubusercontent.com/assets/2193314/18149620/0fc5e642-6f96-11e6-940a-3990cf650c9d.png) Symbol highlight
![image](https://cloud.githubusercontent.com/assets/2193314/18149599/e9b7ff26-6f95-11e6-8403-bfc48f88d79e.png) "Strong" symbol highlight for cursor word
![image](https://cloud.githubusercontent.com/assets/2193314/18149654/55266e00-6f96-11e6-89ab-d4be281a65a7.png) "Strong" symbol highlight for words away from cursor
![image](https://cloud.githubusercontent.com/assets/2193314/18149744/e5b605b6-6f96-11e6-9a1e-b9a27d5832f4.png) Selection + "Strong" symbol highlight for cursor word
![image](https://cloud.githubusercontent.com/assets/2193314/18149762/02f6e762-6f97-11e6-82d2-8746528ed790.png) Selection + "Strong" symbol highlight for cursor word (when selecting via <kbd>ctrl</kbd>+<kbd>d</kbd>)
![image](https://cloud.githubusercontent.com/assets/2193314/18149836/8b8ef84e-6f97-11e6-89d0-48dfb0fc87db.png) 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:
    
    ![image](https://cloud.githubusercontent.com/assets/2193314/18150034/ef49b940-6f98-11e6-8b92-760f40dd5c4d.png)
    
    Why are both `userEnv` variables highlighted with the strong symbol highlight below but not above?
    
    ![image](https://cloud.githubusercontent.com/assets/2193314/18150039/fd69d172-6f98-11e6-83f4-b495607ae9ca.png)
  - 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