theme custom menus

[sbatten]

ref #52914

incomplete, theming the menubar (done) and menus (not done)

[bpasero]

@sbatten I am not sure every color works as expected, here is some individual feedback:

• menubar.inactiveMenuForeground: this color is not doing anything for me and I would rename it to menu.inactiveForeground. Once it works we should also add a corresponding menu.inactiveBackground
• menubar.menuActiveBorder: I would rename this to menu.activeBorder and apply it for any active menu item including the menu bar
• menubar.activeMenuBackground: I would rename this to menu.activeBackground and apply it for any active menu item including the menu bar
• menubar.activeMenuForeground: I would rename this to menu.activeForeground and apply it for any active menu item including the menu bar

On top of that I think we also need these colors:

• menu.background: overall background color of the menu (maybe only when expanded)
• menu.foreground: overall foreground color of the menu
• menu.hoverForeground and menu.hoverBackground will probably come up as well at one point

[sbatten]

@bpasero I've updated to be complete now. I've updated the names to be a bit less verbose in response to your feedback, but I've settled on a different set of keys. This is because the menubar needs to be separate from the menus themselves as it needs to blend with the titlebar. Due to this, I only allow theming of the menubar's selected item. The rest is decided by the titlebar.

Another note. I theme the menus in the menubarPart instead of attaching a styler to the menu for simplicity. If I understand correctly, exposing the colors/styling on the menu widget would require quite a bit more code since the menu composes an actionbar and thus we would also need to expose it there. Further, anywhere menus are created, the styler would have to be applied which includes the menubar, the context menus, and dropdown actions, at least.

changes made

[bpasero]

To summarize, here are the new colors:

• menubar.selectedBorder
• menubar.selectedBackground
• menubar.selectedForeground
• menu.background
• menu.foreground
• menu.selectedBorder
• menu.selectedBackground
• menu.selectedForeground

The menubar.* colors only apply to this top level stripe:

Whereas the other colors apply to every menu, including the context menu.

I think the distinction between menubar and menu makes sense. I am not 100% sure about the word selected because this color applies under 2 conditions:

• you hover over a menu item
• you select a menu item with keyboard

In other areas we typically have a dedicated color for the case where you hover over an element vs. the active selected element. Do we want to distinguish between these 2 cases here as well? When I look at native menus on Windows there does not seem to be any difference between hovering and selection, so maybe its fine to keep this as one color, but then maybe it should not be called "selected" but rather "active"? Similar to these colors from tabs:

Adding @aeschli to this review to comment on the picked color keys.

[bpasero]

Works great, I also suggest to make a pass over our built in themes and add the colors once we have decided on the final color keys.

[aeschli]

Names are good

[sbatten]

@bpasero @aeschli yea, I want to make the behavior hover === keyboard selected so no distinction is necessary. that said, if names are good, please merge

[bpasero]

@sbatten I renamed "selected" to "selection" and will merge.

Also do not forget to update our docs: https://code.visualstudio.com/docs/getstarted/theme-color-reference

[tweakimp]

What color is the divider between subgroups in the menu? Would it make sense to create a key for that, too?