Change:
<!-- Do Not Delete This! featurerequesttemplate --<!-- Please read our Rules of Conduct: --<!-- Please search existing issues to avoid creating duplicates. --<!-- Describe the feature you'd like. --<img width="364" alt="Screen Shot 2021-12-06 at 9 37 40 AM" src="https://user-"I noticed that the hover background color is the same for {} and JSON even though they have two separate dialogs that show up on hover. I didn't realize I needed to specifically hover each for the different dialogs. Can we have different hover background colors like below to distinguish between the two? <img width="399" alt="Screen Shot 2021-12-06 at 9 38 21 AM" src="https://user-"
I think I wasn't able to find a working color that was distinguishable enough to make a difference given all the colors we already use in the status bar. And I personally don't mind the way it is now, not sure we got any feedback from users?
I think it's not immediately obvious that there are two hovers because there is no direct feedback that it's there, which may be why we haven't seen any feedback. I think starting with a similar hover interaction that we have with the split run button would be a good start: <img width="94" alt="CleanShot 2021-12-15 at 07 29 26 src="https://user-"<img width="279" alt="CleanShot 2021-12-15 at 07 31 58 src="https://user-"<img width="207" alt="CleanShot 2021-12-15 at 07 33 06 src="https://user-"Ideally the split run button would have two hovers, like mentions above, as it's something we already do in the terminal: <img width="146" alt="CleanShot 2021-12-15 at 07 37 24 src="https://user-"
I had to pull quite some tricks to get the same background color appear when you hover over the one or the other item, are you saying we go back to only showing hover background where you hover over?
I think the preferred style is to use the dual hover feedback (what was originally proposed), I think we can use a mixture of opacity to make that happen. I also just opened to make split hovers to be consistent so it would make sense that the language status indicator have similar hover feedback, like: <img width="272" alt="CleanShot 2021-12-15 at 08 26 46 src="https://user-"
I think we will end up with padding/margin issues when you move the mouse between the two because there is no real padding in between. If you can figure out the sizing and proof that in a video that shows the interaction between two, I can take a look.
Alright let me see what I can do
You can check out the  branch for a sample, had to introduce a new color token with a slight higher opacity for the active item: https://user-
thank you, works quite well. as I had indicated the padding is a little bit inconsistent between the one and the other item then: ! But I don't mind merging your change in if you want.
I think the inconsistent padding is ok otherwise the two items will appear farther away from each other and be a bit inconsistent with how we represent them in regular status bar items. I'll merge in my changes then!
For verification, find a language status indicator by either opening a JSON or Typescript file (you'll see the next to the language status bar item) and verify that each item has separate hover states. Also verify that you can theme .

Discussion:
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { IAction, Separator, toAction } from 'vs/base/common/actions'; import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; <del> import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND, STATUS_BAR_ITEM_HOVER_BACKGROUND, STATUS_BAR_ITEM_ACTIVE_BACKGROUND, STATUS_BAR_PROMINENT_ITEM_FOREGROUND, STATUS_BAR_PROMINENT_ITEM_BACKGROUND, STATUS_BAR_PROMINENT_ITEM_HOVER_BACKGROUND, STATUS_BAR_BORDER, STATUS_BAR_NO_FOLDER_FOREGROUND, STATUS_BAR_NO_FOLDER_BORDER } from 'vs/workbench/common/theme'; </del> <ins> import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND, STATUS_BAR_ITEM_HOVER_BACKGROUND, STATUS_BAR_ITEM_ACTIVE_BACKGROUND, STATUS_BAR_PROMINENT_ITEM_FOREGROUND, STATUS_BAR_PROMINENT_ITEM_BACKGROUND, STATUS_BAR_PROMINENT_ITEM_HOVER_BACKGROUND, STATUS_BAR_BORDER, STATUS_BAR_NO_FOLDER_FOREGROUND, STATUS_BAR_NO_FOLDER_BORDER, STATUS_BAR_ITEM_COMPACT_HOVER_BACKGROUND } from 'vs/workbench/common/theme'; </ins> import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace'; import { contrastBorder, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { EventHelper, createStyleSheet, addDisposableListener, EventType, clearNode } from 'vs/base/browser/dom';

// Install mouse listeners to update hover feedback for // all compact entries that belong to each other const statusBarItemHoverBackground = this.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND)?.toString(); <ins> const statusBarItemCompactHoverBackground = this.getColor(STATUS_BAR_ITEM_COMPACT_HOVER_BACKGROUND)?.toString(); </ins> this.compactEntriesDisposable.value = new DisposableStore(); <del> if (statusBarItemHoverBackground && this.theme.type !== ColorScheme.HIGH_CONTRAST) { </del> <ins> if (statusBarItemHoverBackground && statusBarItemCompactHoverBackground && this.theme.type !== ColorScheme.HIGH_CONTRAST) { </ins> for (const [, compactEntryGroup] of compactEntryGroups) { for (const compactEntry of compactEntryGroup) { if (!compactEntry.hasCommand) {

this.compactEntriesDisposable.value.add(addDisposableListener(compactEntry.labelContainer, EventType.MOUSE_OVER, () => { compactEntryGroup.forEach(compactEntry => compactEntry.labelContainer.style.backgroundColor = statusBarItemHoverBackground); <ins> compactEntry.labelContainer.style.backgroundColor = statusBarItemCompactHoverBackground; </ins> })); this.compactEntriesDisposable.value.add(addDisposableListener(compactEntry.labelContainer, EventType.MOUSE_OUT, () => {

hc: Color.white.transparent(0.12) }, localize('statusBarItemHoverBackground', "Status bar item background color when hovering. The status bar is shown in the bottom of the window.")); <ins> export const STATUS_BAR_ITEM_COMPACT_HOVER_BACKGROUND = registerColor('statusBarItem.compactHoverBackground', { dark: Color.white.transparent(0.20), light: Color.white.transparent(0.20), hc: Color.white.transparent(0.20) }, localize('statusBarItemCompactHoverBackground', "Status bar item background color when hovering an item that contains two hovers. The status bar is shown in the bottom of the window.")); </ins> export const STATUS_BAR_PROMINENT_ITEM_FOREGROUND = registerColor('statusBarItem.prominentForeground', { dark: STATUS_BAR_FOREGROUND, light: STATUS_BAR_FOREGROUND,