The "editor.selectionHighlightBackground" color should have different contrast with "editor.selectionBackground" color

[jerrykal]

By default, the editor.selectionHighlightBackground have the same color with editor.selectionBackground, it could be confused sometime:

In the screenshot I only selected the fourth a, but the background highlight is confusing.

The editor.selectionHighlightBackground color usually have lower contrast than the editor.selectionBackground

For example:

Default Dark+

Monokai

Monokai Dimmed

[arcticicestudio]

Thanks for your contribution :+1:

I'll analyze and reproduce this behavior and see if it should be changed.

[arcticicestudio]

Hi @ooJerryLeeoo :wave:, sorry for the long delay. I've been really busy with my job, real life and Nord's, finally launched, official website and documentation.

The problem you're describing is a really tricky one for theme designers since VS Code limits us to only use the theme keys they provide so it is hard to use different colors that match the overall theme style while supporting all the different states:

• selected ➜ will highlight other occurrences in the same editor
• selected, but no focus ➜ will highlight other occurrences in the same editor, but reduces opacity due to focus loss
• highlighted as find result by the search widget
  • ➜ allows also to be highlighted as selection and as other occurrence

You see there are a lot of states that you need to think of when choosing the colors and there are many themes out there that have the same problem like e.g. the large thread of sdras/night-owl-vscode-theme#90.

In my opinion the case you're describing here is a edge case since it is unusual to have the same words in the exact same indentation on multiple lines exactly with each other. I've tested several opacity settings and different colors and there's not really a case where it might end up in a nice way for all states.

The following screenshots show the current highlighting color with a opacity of 60%. It doesn't really make a large difference when multiple same words are highlighted like on your examples, but it significantly decreases the visual recognizability when words are distributed among a paragraph or within the current active cursor line.

Current highlighting

Significantly decreases visual recognizability with total opacity of 60%

Minimal improvement for edge case and in highly zoomed view

Proposed Solution

As you can see, it is unfortunately hard to find a good and well balanced solution for this problem, therefore I don't want to change the theme, but every user who does not like this highlighting can simply fix it using a theme-scoped workbench color customization:

"workbench.colorCustomizations": {
  "[Nord]": {
    // Colorize automatic occurrences highlights different than selections
    "editor.selectionHighlightBackground": "#434c5e99"
  }
}

Adding this snippet to your user settings and replace the #434c5e99 with any color you'd like. This will only apply to the Nord theme and will not affect any other themes. Also if you want to disable the automatic highlighting of other word occurrences or code variables you can also add this to your settings:

// Disable automatic occurrences highlighting
"editor.occurrencesHighlight": false

I hope you can understand this solution and feel free to ask if there are any questions :smile:

[madprops]

What I did was add a green-ish color to the main highlight, which might break the theme a little but I prefer having a better idea of the selections:

I made this and other changes into a new theme which you can find here: https://marketplace.visualstudio.com/items?itemName=madprops.nordico