Skip to content

[Theming] Add titleBar.activeHoverBackground and titleBar.activeHoverForeground #272840

@70853n

Description

@70853n

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.

Metadata

Metadata

Assignees

Labels

feature-requestRequest for new features or functionalityhelp wantedIssues identified as good community contribution opportunitieslayoutGeneral VS Code workbench layout issuesthemesColor theme issues

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions