Microsoft/vscode

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

Open

#272840 opened on Oct 23, 2025

View on GitHub
 (1 comment) (0 reactions) (1 assignee)TypeScript (74,848 stars) (10,221 forks)batch import
feature-requesthelp wantedlayoutthemes

Description

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.

Contributor guide