From 991a75ace40a1d6f876f10b011fd5abcf80eb9c2 Mon Sep 17 00:00:00 2001 From: Michael Freiherz Date: Fri, 24 Oct 2025 18:37:50 +0000 Subject: [PATCH 1/2] feat: add hover background and foreground colors for titlebar (#272840) Introduces titleBar.activeHoverBackground and titleBar.activeHoverForeground variables. --- build/lib/stylelint/vscode-known-variables.json | 2 ++ src/vs/workbench/common/theme.ts | 4 ++++ .../workbench/services/themes/common/workbenchThemeService.ts | 4 ++++ 3 files changed, 10 insertions(+) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 2b42bca7fa3e5..3acb699322c31 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -870,6 +870,8 @@ "--vscode-textSeparator-foreground", "--vscode-titleBar-activeBackground", "--vscode-titleBar-activeForeground", + "--vscode-titleBar-activeHoverBackground", + "--vscode-titleBar-activeHoverForeground", "--vscode-titleBar-border", "--vscode-titleBar-inactiveBackground", "--vscode-titleBar-inactiveForeground", diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 143a09c1bf17c..59bd7c6a27e33 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -685,6 +685,10 @@ export const TITLE_BAR_BORDER = registerColor('titleBar.border', { hcLight: contrastBorder }, localize('titleBarBorder', "Title bar border color.")); +export const TITLE_BAR_ACTIVE_HOVER_BACKGROUND = registerColor('titleBar.activeHoverBackground', toolbarHoverBackground, localize('titleBarActiveHoverBackground', "Title bar background when hovering over title bar actions with the mouse. Title bar actions include the back and forward navigation buttons as well as the command center.")); + +export const TITLE_BAR_ACTIVE_HOVER_FOREGROUND = registerColor('titleBar.activeHoverForeground', TITLE_BAR_ACTIVE_FOREGROUND, localize('titleBarActiveHoverForeground', "Title bar foreground when hovering over title bar actions with the mouse. Title bar actions include the back and forward navigation buttons as well as the command center.")); + // < --- Menubar --- > export const MENUBAR_SELECTION_FOREGROUND = registerColor('menubar.selectionForeground', TITLE_BAR_ACTIVE_FOREGROUND, localize('menubarSelectionForeground', "Foreground color of the selected menu item in the menubar.")); diff --git a/src/vs/workbench/services/themes/common/workbenchThemeService.ts b/src/vs/workbench/services/themes/common/workbenchThemeService.ts index 9c0f9e254d359..91db756d74e3e 100644 --- a/src/vs/workbench/services/themes/common/workbenchThemeService.ts +++ b/src/vs/workbench/services/themes/common/workbenchThemeService.ts @@ -185,6 +185,8 @@ export const COLOR_THEME_DARK_INITIAL_COLORS = { 'textSeparator.foreground': '#21262D', 'titleBar.activeBackground': '#181818', 'titleBar.activeForeground': '#CCCCCC', + 'titleBar.activeHoverBackground': '#1F1F1F', + 'titleBar.activeHoverForeground': '#FFFFFF', 'titleBar.border': '#2B2B2B', 'titleBar.inactiveBackground': '#1F1F1F', 'titleBar.inactiveForeground': '#9D9D9D', @@ -338,6 +340,8 @@ export const COLOR_THEME_LIGHT_INITIAL_COLORS = { 'textSeparator.foreground': '#21262D', 'titleBar.activeBackground': '#F8F8F8', 'titleBar.activeForeground': '#1E1E1E', + 'titleBar.activeHoverBackground': '#b8b8b850', + 'titleBar.activeHoverForeground': '#1E1E1E', 'titleBar.border': '#E5E5E5', 'titleBar.inactiveBackground': '#F8F8F8', 'titleBar.inactiveForeground': '#8B949E', From b03a661280cba75ffe02c99b3206e29895895b3b Mon Sep 17 00:00:00 2001 From: Michael Freiherz Date: Fri, 24 Oct 2025 18:53:42 +0000 Subject: [PATCH 2/2] feat: add hover colors to titlebar buttons (#272840) - adds css styling for :hover state of the back and forward and toolbar buttons --- .../browser/parts/titlebar/media/titlebarpart.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index 0246cd2ad108c..fd867143302c8 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -151,13 +151,20 @@ color: var(--vscode-titleBar-activeForeground); } +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label:hover, +.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:hover { + background-color: var(--vscode-titleBar-activeHoverBackground); + color: var(--vscode-titleBar-activeHoverForeground); +} + .monaco-workbench .part.titlebar.inactive > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label, .monaco-workbench .part.titlebar.inactive > .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-inactiveForeground); } -.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 .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label:hover { + background-color: var(--vscode-titleBar-activeHoverBackground); + color: var(--vscode-titleBar-activeHoverForeground); } .monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center {