自定义 VSCode 主题：如何在自动完成列表中保持焦点项目的原始图标颜色？

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

2021 年 2 月的版本对自动完成列表的颜色进行了重大更改：

我们对焦点项目的颜色进行了以下设置：

这三个工作正常。

但是，在设置focusIconForeground的时候，好像我们可以覆盖图标的颜色...但是如果我想保持原来的颜色怎么办图标，即使项目已获得焦点？

例如，假设我有以下设置：

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

如果是这样，这是呈现的自动完成列表：

看看焦点项目的图标是红色。我希望它保持紫色，它原来的颜色。

那么，我可以在 quickInputList.focusIconForeground 中使用什么设置来使图标保持其原始颜色？

附带说明...我正在使用“Default Light+”主题，但我注意到许多其他主题（如“Quiet Light”和“Monokai”）完全符合我的要求。

您的问题是由于使用了不正确的语义。 “Quick Input”是菜单 - 与输入相结合 - 当 [F1] KEY 被击中时会打开。这显然不是你想要的目标。


“快速信息”是我猜你感到困惑的地方。

"快速信息"是显示在 "Suggestions Widget" 旁边打开的框中的信息，因此，您需要（或想要）定位的项目是 Suggestions Widget。有几个属性可用于为 Suggestions Widget 着色 — 您要查找的那个在下面以粗体突出显示，下面是其他 Suggestions Widget 可用于为小部件着色的属性。


主题属性

"editorSuggestWidget.selectedIconForeground": "#ABCDEF",

“建议小部件” 的其他选择器如下：

  1. editorSuggestWidget.selectedForeground
  2. editorSuggestWidget.selectedBackground
  3. editorSuggestWidget.highlightForeground
  4. editorSuggestWidget.focusHighlightForeground
  5. editorSuggestWidget.focusHighlightForeground
  6. editorSuggestWidget.background
  7. editorSuggestWidget.border
  8. editorSuggestWidget.foreground

以下是防止 属性 改变颜色的方法：

symbolIcon 在 “建议小工具” 中成为焦点的任何 symbolIcon 都会突出显示，显然，这会改变图标的颜色会持续一小会儿——直到焦点移动、选中焦点中的选项或关闭小部件。对于那些不希望他们的 symbolIcon 的 颜色是动态的，当图标在建议小工具。有一个解决方案，但肯定不是 “适合所有人” 类型的解决方案。在我进一步解释之前，让我向您展示一下解决方案。


示例：

下面是显示相同 3 个主题属性的编辑器的 3 个屏幕截图。在每个图像中，主题属性都略有变化，以演示以特定方式配置某些属性时会发生什么。

图像#1

"Image No. 1 demonstrates how the "quickInputList.focusIconForeground" property overrides the default color of the Suggestions Widget's icon that's in focus."




图像#2

"Image No. 2 demonstrates the top-level property for highlighting the Suggestions Widget's "Icon in Focus". Do you see how editorSuggestWidget.selectedIconForeground changed the color from red to green?"




图像#3

"Image No. 3 here is where everything ties together. You probably noticed the SymbolIcon property in the images that I haven't mentioned yet. Well, now that we are able to use the top-level property for highlighting icon's that are in focus within the Suggestions Widget, when can set the focus-highlight color so that it is the same color as the Icon, which is what the property "symbolIcon.propertyForeground" is for. If you look below, the icons are all yellow, and the stay yellow, even when in focus."



您可能已经知道这种方法的缺点是什么。所有符号图标必须设置为相同的颜色才能工作。 Breadcrumbs、Suggestions Widget 等中弹出的每个图标都有一个供主题开发者使用的 属性。如果你将每个 SymbolIcon 属性 设置为相同的颜色，并将焦点属性设置为与图标相同的颜色，那么当图标进入焦点时颜色永远不会改变，因此，你只会有符号图标的单一颜色。

就我个人而言，当符号图标成为焦点时，我会突出显示它们，并且我仍然为所有符号图标分配相同的颜色，因为它使所有内容都匹配，从而获得更好的美学效果 IMO，它也使主题更具可读性，但是最重要的是，将所有符号图标设置为相同的颜色可以让我将符号图标与其他类型的图标区分开来，我发现在大多数情况下，这些图标是交互式的，而符号图标只是装饰。

不幸的是，没有办法关闭主题中的焦点突出显示，至少到 2021 年 7 月是这样。有人可能认为将焦点 属性 设置为 #00000000，如下所示，会使因此焦点属性不会突出显示，并且图标将保持其原始颜色，不幸的是情况并非如此。突出显示属性设置为 #000000 会使 属性 突出显示的项目不可见。

"editorSuggestWidget.selectedIconForeground": #000000

为了找到它，我不得不深入研究 VSCode 的实际源代码。发生的事情是：建议框图标称为 product icon, which is actually a glyph icon font 可以主题化。它附带无颜色，因为颜色由活动颜色主题定义。

渲染建议框时，VSCode检查当前主题是否为图标定义了颜色。如果没有颜色，则根据图标类型给出默认颜色。但是，如果颜色主题为图标定义了一种颜色，则使用该颜色，不管图标类型如何——也就是说，主题覆盖颜色。此颜色的参数是 editorSuggestWidget.selectedIconForeground，如 JayDev's . The code which does this can be seen here.

中所述

现在我使用的主题“Default Light+”确实覆盖了这个颜色，并且没有办法在VSCode设置文件中清除这个覆盖.其他主题不会覆盖，那些主题显示原始图标颜色，这是我想要的行为。所以，我要做的只是简单地修改主题，在 VSCode 安装文件夹中，注释掉有问题的行，可以在 here 中找到。作为参考，在 VSCode 安装文件夹中，它是该文件的第 28 行：

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

要注释掉的行本身是：

"list.activeSelectionIconForeground": "#FFF"

另一种解决方案是使用此修复创建另一个基于“Default Light+”的主题。但是，如果将来更新主题，我必须跟上步伐，这是我不想做的。因此，我正在做的是将此修复程序添加到我刚才写的 this patch 以自动化其他 VSCode 自定义。

注意： 所有源代码引用均已删除 VSCode 提交 da77887 (June 10, 2021)。显然，这些参考资料将来可能会发生变化。