Change:
The extension name becomes non-opaque as I hover over each extension name. https://user- cc
Seems like we've been playing whack-a-mole with the disabled state styles recently. any idea what's going on here?
It seems we have different ways to set the disabled color. Fixed it to use the defined disabled color that is already being used for description.
Thanks

Discussion:
import { isLanguagePackExtension } from 'vs/platform/extensions/common/extensions'; import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { ThemeIcon } from 'vs/base/common/themables'; <del> import { foreground, listActiveSelectionForeground, listActiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionBackground, listFocusForeground, listFocusBackground, listHoverForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry'; </del> import { WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { HoverPosition } from 'vs/base/browser/ui/hover/hoverWidget';

} registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { <del> const foregroundColor = theme.getColor(foreground); if (foregroundColor) { const authorForeground = foregroundColor.transparent(.9).makeOpaque(WORKBENCH_BACKGROUND(theme)); collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled) .author { color: ${authorForeground}; }`); const disabledExtensionForeground = foregroundColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(theme)); collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled { color: ${disabledExtensionForeground}; }`); } const listActiveSelectionForegroundColor = theme.getColor(listActiveSelectionForeground); if (listActiveSelectionForegroundColor) { const backgroundColor = theme.getColor(listActiveSelectionBackground) || WORKBENCH_BACKGROUND(theme); const authorForeground = listActiveSelectionForegroundColor.transparent(.9).makeOpaque(backgroundColor); collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row:not(.disabled).focused.selected .author { color: ${authorForeground}; }`); collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row:not(.disabled).selected .author { color: ${authorForeground}; }`); const disabledExtensionForeground = listActiveSelectionForegroundColor.transparent(.5).makeOpaque(backgroundColor); collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row.disabled.focused.selected { color: ${disabledExtensionForeground}; }`); collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row.disabled.selected { color: ${disabledExtensionForeground}; }`); } const listInactiveSelectionForegroundColor = theme.getColor(listInactiveSelectionForeground); if (listInactiveSelectionForegroundColor) { const backgroundColor = theme.getColor(listInactiveSelectionBackground) || WORKBENCH_BACKGROUND(theme); const authorForeground = listInactiveSelectionForegroundColor.transparent(.9).makeOpaque(backgroundColor); collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled).selected .author { color: ${authorForeground}; }`); const disabledExtensionForeground = listInactiveSelectionForegroundColor.transparent(.5).makeOpaque(backgroundColor); collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled.selected { color: ${disabledExtensionForeground}; }`); } const listFocusForegroundColor = theme.getColor(listFocusForeground); if (listFocusForegroundColor) { const backgroundColor = theme.getColor(listFocusBackground) || WORKBENCH_BACKGROUND(theme); const authorForeground = listFocusForegroundColor.transparent(.9).makeOpaque(backgroundColor); collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row:not(.disabled).focused .author { color: ${authorForeground}; }`); const disabledExtensionForeground = listFocusForegroundColor.transparent(.5).makeOpaque(backgroundColor); collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row.disabled.focused { color: ${disabledExtensionForeground}; }`); } const listHoverForegroundColor = theme.getColor(listHoverForeground); if (listHoverForegroundColor) { const backgroundColor = theme.getColor(listHoverBackground) || WORKBENCH_BACKGROUND(theme); const authorForeground = listHoverForegroundColor.transparent(.9).makeOpaque(backgroundColor); collector.addRule(`.extensions-list .monaco-list .monaco-list-row:hover:not(.disabled):not(.selected):.not(.focused) .author { color: ${authorForeground}; }`); const disabledExtensionForeground = listHoverForegroundColor.transparent(.5).makeOpaque(backgroundColor); collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled:hover:not(.selected):.not(.focused) { color: ${disabledExtensionForeground}; }`); } </del> const verifiedPublisherIconColor = theme.getColor(extensionVerifiedPublisherIconColor); if (verifiedPublisherIconColor) { const disabledVerifiedPublisherIconColor = verifiedPublisherIconColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(theme)); collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled .author .verified-publisher ${ThemeIcon.asCSSSelector(verifiedPublisherThemeIcon)} { color: ${disabledVerifiedPublisherIconColor}; }`); } });

min-width: 0; } <del> .monaco-list-row.disabled .extension-list-item .details .description { </del> <ins> .monaco-list-row.disabled .extension-list-item { </ins> color: var(--vscode-disabledForeground); } <ins> .monaco-list-row.disabled.selected .extension-list-item .details .header .name, </ins> .monaco-list-row.disabled.selected .extension-list-item .details .description { color: unset; }