question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:

image Selection image Find match image Symbol match image Selection match (lighter than word match) image Selection + selection match image Selection + find match + symbol match image Symbol highlight image “Strong” symbol highlight for cursor word image “Strong” symbol highlight for words away from cursor image Selection + “Strong” symbol highlight for cursor word image Selection + “Strong” symbol highlight for cursor word (when selecting via <kbd>ctrl</kbd>+<kbd>d</kbd>) image 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

      Why are both userEnv variables highlighted with the strong symbol highlight below but not above?

      image

    • 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:open
  • Created 7 years ago
  • Reactions:11
  • Comments:14 (7 by maintainers)

github_iconTop GitHub Comments

7reactions
iulocommented, Dec 8, 2016

any update? How about use border with match select like atom? select

1reaction
FabioAntunescommented, Dec 5, 2016

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 screenshot from 2016-12-05 15 22 18

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Pick a Color in the Scratch Paint Editor - TechnoKids
They typically display a selection of basic choices such as red, orange, yellow, green, blue, purple, white, black, and grey. Some programs will...
Read more >
Color Theory 101: A Complete Guide to Color Wheels & Color ...
Knowing color theory and design can help you make content stand out. ... Take selecting the right color combination, for instance.
Read more >
How to Edit and Replace Colors in Your Photos | Learn BeFunky
Ready to use our amazing color replacement tool? Head to the Photo Editor and upload your photo by selecting it from the Open...
Read more >
How to Select and Change Colors in Photoshop - YouTube
Get the Sample Image and Follow Along:https://phlearn.com/ select -change- color -yt00-descSelecting Color RangeTo select out the different ...
Read more >
How to select by color with Magic Wand - Adobe Support
Tip: To select a wider range of color, enter a higher value (up to 255) in the Tolerance field in the Options bar...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found