Skip to content

Commit 8371bb8

Browse files
codetheoristcodetheorist
committed
feat: add hoverForeground and hoverBackground colors to activity bars
Adds new color tokens for customizing activity bar appearance when hovering: * activityBar.hoverForeground * activityBar.hoverBackground * activityBarTop.hoverForeground * activityBarTop.hoverBackground Allows theme creators and users to set colors for the hover state of activity bar icons, addressing the issue where hover foreground was the same as the active foreground. This commit also takes into account suggested changes in PR microsoft#285629 by Copilot bot. Fixes microsoft#210694
1 parent 253b76b commit 8371bb8

File tree

7 files changed

+52
-11
lines changed

7 files changed

+52
-11
lines changed

‎src/vs/workbench/browser/parts/activitybar/activitybarPart.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { IInstantiationService, ServicesAccessor } from '../../../../platform/in
1313
import { DisposableStore, MutableDisposable } from '../../../../base/common/lifecycle.js';
1414
import { ToggleSidebarPositionAction, ToggleSidebarVisibilityAction } from '../../actions/layoutActions.js';
1515
import { IThemeService, IColorTheme, registerThemingParticipant } from '../../../../platform/theme/common/themeService.js';
16-
import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER } from '../../../common/theme.js';
16+
import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_HOVER_FOREGROUND, ACTIVITY_BAR_HOVER_BACKGROUND } from '../../../common/theme.js';
1717
import { activeContrastBorder, contrastBorder, focusBorder } from '../../../../platform/theme/common/colorRegistry.js';
1818
import { addDisposableListener, append, EventType, isAncestor, $, clearNode } from '../../../../base/browser/dom.js';
1919
import { assertReturnsDefined } from '../../../../base/common/types.js';
@@ -93,6 +93,8 @@ export class ActivitybarPart extends Part {
9393
badgeBackground: theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND),
9494
badgeForeground: theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND),
9595
dragAndDropBorder: theme.getColor(ACTIVITY_BAR_DRAG_AND_DROP_BORDER),
96+
hoverForegroundColor: theme.getColor(ACTIVITY_BAR_HOVER_FOREGROUND),
97+
hoverBackgroundColor: theme.getColor(ACTIVITY_BAR_HOVER_BACKGROUND),
9698
activeBackgroundColor: undefined, inactiveBackgroundColor: undefined, activeBorderBottomColor: undefined,
9799
}),
98100
overflowActionSize: ActivitybarPart.ACTION_HEIGHT,
@@ -579,6 +581,24 @@ registerThemingParticipant((theme, collector) => {
579581
`);
580582
}
581583

584+
// Hover colors
585+
const activityBarHoverForegroundColor = theme.getColor(ACTIVITY_BAR_HOVER_FOREGROUND);
586+
const activityBarHoverBackgroundColor = theme.getColor(ACTIVITY_BAR_HOVER_BACKGROUND);
587+
if (activityBarHoverForegroundColor) {
588+
collector.addRule(`
589+
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:not(.checked):hover .action-label::before {
590+
color: ${activityBarHoverForegroundColor};
591+
}
592+
`);
593+
}
594+
if (activityBarHoverBackgroundColor) {
595+
collector.addRule(`
596+
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:not(.checked):hover .action-label {
597+
background-color: ${activityBarHoverBackgroundColor};
598+
}
599+
`);
600+
}
601+
582602
// Styling with Outline color (e.g. high contrast theme)
583603
const outline = theme.getColor(activeContrastBorder);
584604
if (outline) {

‎src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { IStorageService } from '../../../../platform/storage/common/storage.js'
1414
import { contrastBorder } from '../../../../platform/theme/common/colorRegistry.js';
1515
import { IThemeService } from '../../../../platform/theme/common/themeService.js';
1616
import { ActiveAuxiliaryContext, AuxiliaryBarFocusContext } from '../../../common/contextkeys.js';
17-
import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_TOP_ACTIVE_BORDER, ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_TOP_FOREGROUND, ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_DRAG_AND_DROP_BORDER, PANEL_INACTIVE_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, SIDE_BAR_TITLE_BORDER, SIDE_BAR_FOREGROUND } from '../../../common/theme.js';
17+
import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_TOP_ACTIVE_BORDER, ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_TOP_FOREGROUND, ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_DRAG_AND_DROP_BORDER, PANEL_INACTIVE_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, SIDE_BAR_TITLE_BORDER, SIDE_BAR_FOREGROUND, ACTIVITY_BAR_HOVER_FOREGROUND, ACTIVITY_BAR_HOVER_BACKGROUND } from '../../../common/theme.js';
1818
import { IViewDescriptorService } from '../../../common/views.js';
1919
import { IExtensionService } from '../../../services/extensions/common/extensions.js';
2020
import { ActivityBarPosition, IWorkbenchLayoutService, LayoutSettings, Parts, Position } from '../../../services/layout/browser/layoutService.js';
@@ -199,7 +199,9 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart {
199199
get inactiveForegroundColor() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND) : theme.getColor(ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND); },
200200
badgeBackground: theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND),
201201
badgeForeground: theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND),
202-
get dragAndDropBorder() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? theme.getColor(PANEL_DRAG_AND_DROP_BORDER) : theme.getColor(ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER); }
202+
get dragAndDropBorder() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? theme.getColor(PANEL_DRAG_AND_DROP_BORDER) : theme.getColor(ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER); },
203+
get hoverForegroundColor() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND) : theme.getColor(ACTIVITY_BAR_HOVER_FOREGROUND) },
204+
get hoverBackgroundColor() { return $this.getCompositeBarPosition() === CompositeBarPosition.TITLE ? theme.getColor(SIDE_BAR_BACKGROUND) : theme.getColor(ACTIVITY_BAR_HOVER_BACKGROUND) },
203205
}),
204206
compact: true
205207
};

‎src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,12 @@
7878

7979
.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
8080
.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .action-label {
81-
color: var(--vscode-sideBarTitle-foreground) !important;
81+
color: var(--vscode-activityBarTop-hoverForeground) !important;
8282
}
8383

8484
.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
8585
.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .action-label {
86-
color: var(--vscode-activityBarTop-foreground) !important;
86+
color: var(--vscode-activityBarTop-hoverForeground) !important;
8787
}
8888

8989
.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,

‎src/vs/workbench/browser/parts/compositeBarActions.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@ export interface ICompositeBarColors {
134134
readonly activeBorderBottomColor?: Color;
135135
readonly activeForegroundColor?: Color;
136136
readonly inactiveForegroundColor?: Color;
137+
readonly hoverForegroundColor?: Color;
138+
readonly hoverBackgroundColor?: Color;
137139
readonly badgeBackground?: Color;
138140
readonly badgeForeground?: Color;
139141
readonly dragAndDropBorder?: Color;

‎src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,20 +99,26 @@
9999
border-bottom-color: var(--vscode-activityBarTop-activeBorder) !important;
100100
}
101101

102-
.monaco-workbench .part.sidebar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
103102
.monaco-workbench .part.sidebar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .action-label,
104-
.monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
105103
.monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .action-label {
106104
color: var(--vscode-activityBarTop-foreground) !important;
107105
}
108106

109-
.monaco-workbench .part.sidebar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label.uri-icon,
110107
.monaco-workbench .part.sidebar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .action-label.uri-icon,
111-
.monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label.uri-icon,
112108
.monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .action-label.uri-icon {
113109
background-color: var(--vscode-activityBarTop-foreground) !important;
114110
}
115111

112+
.monaco-workbench .part.sidebar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
113+
.monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {
114+
color: var(--vscode-activityBarTop-hoverForeground) !important;
115+
}
116+
117+
.monaco-workbench .part.sidebar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label.uri-icon,
118+
.monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label.uri-icon {
119+
background-color: var(--vscode-activityBarTop-hoverBackground) !important;
120+
}
121+
116122
.monaco-workbench .sidebar.pane-composite-part > .title > .composite-bar-container {
117123
flex: 1;
118124
}

‎src/vs/workbench/browser/parts/sidebar/sidebarPart.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { IKeybindingService } from '../../../../platform/keybinding/common/keybi
1313
import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
1414
import { IThemeService } from '../../../../platform/theme/common/themeService.js';
1515
import { contrastBorder } from '../../../../platform/theme/common/colorRegistry.js';
16-
import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_TITLE_BORDER, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_BORDER, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_TOP_FOREGROUND, ACTIVITY_BAR_TOP_ACTIVE_BORDER, ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND, ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER } from '../../../common/theme.js';
16+
import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_TITLE_BORDER, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_BORDER, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_TOP_FOREGROUND, ACTIVITY_BAR_TOP_ACTIVE_BORDER, ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND, ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_TOP_HOVER_FOREGROUND, ACTIVITY_BAR_TOP_HOVER_BACKGROUND } from '../../../common/theme.js';
1717
import { INotificationService } from '../../../../platform/notification/common/notification.js';
1818
import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
1919
import { AnchorAlignment } from '../../../../base/browser/ui/contextview/contextview.js';
@@ -199,7 +199,9 @@ export class SidebarPart extends AbstractPaneCompositePart {
199199
inactiveForegroundColor: theme.getColor(ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND),
200200
badgeBackground: theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND),
201201
badgeForeground: theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND),
202-
dragAndDropBorder: theme.getColor(ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER)
202+
dragAndDropBorder: theme.getColor(ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER),
203+
hoverForegroundColor: theme.getColor(ACTIVITY_BAR_TOP_HOVER_FOREGROUND),
204+
hoverBackgroundColor: theme.getColor(ACTIVITY_BAR_TOP_HOVER_BACKGROUND)
203205
}),
204206
compact: true
205207
};

‎src/vs/workbench/common/theme.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,15 @@ export const ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER = registerColor('activityBarT
474474

475475
export const ACTIVITY_BAR_TOP_BACKGROUND = registerColor('activityBarTop.background', null, localize('activityBarTopBackground', "Background color of the activity bar when set to top / bottom."));
476476

477+
// Activity Bar Hover Colors
478+
export const ACTIVITY_BAR_HOVER_FOREGROUND = registerColor('activityBar.hoverForeground', ACTIVITY_BAR_FOREGROUND, localize('activityBarHoverForeground', "Activity bar item foreground color when hovering. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
479+
480+
export const ACTIVITY_BAR_HOVER_BACKGROUND = registerColor('activityBar.hoverBackground', null, localize('activityBarHoverBackground', "Activity bar item background color when hovering. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
481+
482+
export const ACTIVITY_BAR_TOP_HOVER_FOREGROUND = registerColor('activityBarTop.hoverForeground', ACTIVITY_BAR_TOP_FOREGROUND, localize('activityBarTopHoverForeground', "Activity bar item foreground color when hovering and the activity bar is on top / bottom. The activity allows to switch between views of the side bar."));
483+
484+
export const ACTIVITY_BAR_TOP_HOVER_BACKGROUND = registerColor('activityBarTop.hoverBackground', null, localize('activityBarTopHoverBackground', "Activity bar item background color when hovering and the activity bar is on top / bottom. The activity allows to switch between views of the side bar."));
485+
477486

478487
// < --- Panels --- >
479488

0 commit comments

Comments
 (0)