-
Notifications
You must be signed in to change notification settings - Fork 36.5k
Open
Labels
feature-requestRequest for new features or functionalityRequest for new features or functionalityhelp wantedIssues identified as good community contribution opportunitiesIssues identified as good community contribution opportunitieslayoutGeneral VS Code workbench layout issuesGeneral VS Code workbench layout issuesthemesColor theme issuesColor theme issues
Milestone
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:
- titleBar.activeHoverBackground
- titleBar.activeHoverForeground
Use toolbar.hoverBackground and titleBar.activeForeground as fallbacks for the respective variables.
Metadata
Metadata
Assignees
Labels
feature-requestRequest for new features or functionalityRequest for new features or functionalityhelp wantedIssues identified as good community contribution opportunitiesIssues identified as good community contribution opportunitieslayoutGeneral VS Code workbench layout issuesGeneral VS Code workbench layout issuesthemesColor theme issuesColor theme issues