Microsoft/vscode

[Theming] Add `titleBar.activeHoverBackground` and `titleBar.activeHoverForeground`

开放

#272,840 创建于 2025年10月23日

 (1 条评论) (0 个反应) (1 位负责人)TypeScript (39,847 个派生)batch import
AndroidGood first issueUIfeature-requesthelp wantedlayoutthemes

仓库指标

星标
 (184,936 个星标)
PR 合并指标
 (PR 指标待抓取)

描述

Missing color variables in *-theme.json

I started developing a custom theme extension and noticed many colors for the :hover state that are defined generally and not specific for the element I want to style.

One example is the title bar's back and forward buttons while being active.

The concrete issue

This is similar to issue #210694

In the current version the colors are either/or

  • set by a common variable, effecting more than just the back and forward buttons
  • not possible to set because a variable is missing

1. The background color variable

This can be controlled via "toolbar.hoverBackground": "#HHHHHHXX",. But this variable is used for several other buttons, like the .actions under the .pane-header.

2. The foreground color variable

There's no variable to control the foreground color in the hover state. The color used is simply:

.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label {
  color: inherit;
}
.monaco-workbench {
  font-size: 13px;
  line-height: 1.4em;
  position: relative;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  color: var(--vscode-foreground);
}

While the actual foreground is overwritten:

.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label,
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item.monaco-dropdown-with-primary .action-label {
  color: var(--vscode-titleBar-activeForeground);
}

Proposed solution

Introduce two variables:

  1. titleBar.activeHoverBackground
  2. titleBar.activeHoverForeground

Use toolbar.hoverBackground and titleBar.activeForeground as fallbacks for the respective variables.

贡献者指南