Customizing VSCode theme: how to keep original icon color for the focused item in autocomplete list?

user_6923555 0
Viewed 342

The February 2021 version brought a breaking change for the colors of autocomplete lists:

Where we have the following settings for the colors of the focused item:

  • quickInputList.focusIconForeground
  • quickInputList.focusForeground
  • quickInputList.focusBackground

The three work fine.

However, when setting focusIconForeground, it seems that we can override the color of the icon... but what if I want to keep the original color of the icon, even when the item is focused?

For example, suppose I have the following settings:

"workbench.colorCustomizations": {
    "[Default Light+]": {
        "quickInputList.focusIconForeground": "#ff0000",
        "quickInputList.focusForeground": "#000000",
        "quickInputList.focusBackground": "#e0e0e0",
    },
},

If so, this is the rendered autocomplete list:

enter image description here

See how the icon of the focused item is red. I want it to remain purple, its original color.

So, what setting can I use in quickInputList.focusIconForeground to keep the icon at its original color?

As a side note... I'm using "Default Light+" theme, but I noticed that many other themes (like "Quiet Light" and "Monokai") do exactly what I'm trying to do.

visual-studio-code themes colors
1 Answers

I had to dig into the actual source code of VSCode in order to find this. What happen is: the suggestion box icon is called product icon, which is actually a glyph icon font that can be themed. It ships with no color, because the color is defined by the active color theme.

When the suggestion box is rendered, VSCode checks if current theme has defined a color to the icon. If there is no color, a default color is given according to the icon type. However, if the color theme defined a color to the icon, this color is used, regardless of the icon type – that is, the theme overrides the color. The parameter for this color is editorSuggestWidget.selectedIconForeground, as noted in JayDev's answer. The code which does this can be seen here.

Now the theme I'm using, "Default Light+", does override this color, and there is no way to clear this overriding in VSCode settings file. Other themes do not override, and those themes show the original icon color, which is the behavior I want. So, what I had to do was simply modify the theme, inside VSCode installation folder, commenting out the offending line, which can be found here. For reference, in VSCode installation folder, it's line 28 of this file:

resources\app\extensions\theme-defaults\themes\light_vs.json

The line itself to be commented out is:

"list.activeSelectionIconForeground": "#FFF"

Another solution would simply be to create another theme, based off "Default Light+", with this fix. However, if the theme is updated in the future, I'd have to keep the pace, something I don't want to do. So, what I'm doing is adding this fix to this patch I wrote a while ago to automate other VSCode customizations.

Note: All source code references were taken off VSCode commit da77887 (June 10, 2021). These references may, obviously, change in the future.

user_69235550
Related