Allow suggest icons to be themeable

[aditya81070]

Issue Type: Bug

I updated the VS Code today and after updating it when I started writing code, I found that the colour of import suggestions as well as object.method suggestions' icon and text colour got changed. Previously, it was blue but now it is kind of grey. Because of this, I am not able to distinguish between local suggestions(words that are used in the current file) and actual functions/properties/imports.

I also tried removing the Cobalt2 theme and using vscode default theme but still, it is the same. Please check the below screenshot. The publishCleanupEvent should have appeared in the blue. I know that we can customise the colour of suggestions but I haven't touched any settings related to it.

Edit: I found that the suggestion colour is the same but the current selection's colour is changing.

VS Code version: Code 1.57.0 (Universal) (b4c1bd0, 2021-06-09T17:22:31.215Z)
OS version: Darwin x64 20.5.0
Restricted Mode: No

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz (8 x 2000)
GPU Status	2d_canvas: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	2, 3, 3
Memory (System)	16.00GB (0.50GB free)
Process Argv	--crash-reporter-id 4864d9f4-e6d3-4f8e-9986-b64a8e1eb107
Screen Reader	no
VM	0%

Extensions (15)

Extension	Author (truncated)	Version
emojisense	bie	0.8.0
path-intellisense	chr	2.3.0
bracket-pair-colorizer	Coe	1.0.61
vscode-eslint	dba	2.1.22
gitlens	eam	11.4.1
EditorConfig	Edi	0.16.4
prettier-vscode	esb	6.4.0
auto-rename-tag	for	0.1.6
todo-tree	Gru	0.0.213
vscode-styled-components	jpo	1.6.4
react-proptypes-intellisense	OfH	1.0.3
material-icon-theme	PKi	4.7.0
code-spell-checker	str	1.10.2
serverless-ide-vscode	Thr	0.5.31
vscodeintellicode	Vis	1.2.14

(1 theme extensions excluded)

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
pythonvspyt602:30300191
vspor879:30202332
vspor708:30202333
vspor363:30204092
pythonvspyt639:30300192
pythontb:30283811
pythonvspyt551:30311712
vspre833cf:30267465
pythonptprofiler:30281270
vshan820:30294714
pythondataviewer:30285071
vscus158cf:30286554
vscgsv2:30307504
vscorehov:30309549
vscod805cf:30301675
binariesv517cf:30312826

[HankTwTw]

same problem,Is there any way to setting the icon color when selected?

[enmanuelmag]

same problem here, with Monokai Pro (Spectrum)

[miguelsolorio]

This is because the active state for IntelliSense has been updated to match the rest of our active states in tree views:

This means that any icon that is part of the focused state is inverted to maintain a high contrast. This becomes challenging when themes deviate from the default focus state.

[aditya81070]

Thanks @misolori. Sorry, I missed these changes while reading the release notes. I see there are three configurations to change the colors of selected/focused items. Instead of directly changing the colors, can we provide the default values same as previous values and someone who wants to change these color can override these.
I don't know much about community feedbacks about this change but if it is recommended then can you provide the previous values of three settings so I can override them in my settings?

list.focusHighlightForeground
quickInputList.focusForeground
editorSuggestWidget.selectedForeground

[miguelsolorio]

Unfortunately this won't change the IntelliSense icon colors as the focus items is intended to have the highest contrast. The best option is to reach out to the theme owners to provide a better focus state for their theme. As I mentioned before, when themes deviate from the default styles it certainly makes it challenging to make the theme look good.

As a good example for the Cobalt theme, here's some settings i'd suggest for the theme author:

"workbench.colorCustomizations": {
    "[Cobalt2]": {
      "editorSuggestWidget.selectedForeground": "#fff",
      "editorSuggestWidget.selectedBackground": "#1f4662"
    },
}

[NENightElves]

Is there any way to make the words in high contrast while remain the icon as the same colour as the former versions of vscode?

[miguelsolorio]

I'll be working on creating a proposal that will allow themes to opt-in to this new style rather to auto-opting all themes.

[miguelsolorio]

This will be in tomorrow's Insiders version, themes will now need to opt-in to theme the suggest icon via list.activeSelectionIconForeground. These will be enabled in the default dark and light theme.

For verification:

• Use a theme like the GitHub/Cobalt2/Nord and verify that in the suggest widget that the symbol icons are not themed
• Same steps but also verify that our default dark and light theme theme these
• Verify that themeing list.activeSelectionIconForeground works via workbench.colorCustomizations in your settings.json

[infinnie]

I suggest that it be possible for list.activeSelectionIconForeground to be unset with a boolean too, in case of customizing existing themes that have already set this property.

[wenfangdu]

I suggest that it be possible for list.activeSelectionIconForeground to be unset with a boolean too, in case of customizing existing themes that have already set this property.

I second that, creating a new theme just for unsetting the suggestion icon color feels cumbersome.

[miguelsolorio]

Given that we don't currently support unsetting color tokens from settings I've created #128062 to track this. Please upvote and subscribe if you are interested in that one.