Change:
<!-- Do Not Delete This! featurerequesttemplate --<!-- Please read our Rules of Conduct: --<!-- Please search existing issues to avoid creating duplicates. --<!-- Describe the feature you'd like. --! If you can add a mouseover background color, a mouseover foreground color, and a mouseover border color for the button, the entire UI display effect will be even more wonderful! Windows 10 vscode 1.85
Good point. When in the side position an unselected Activity Bar icon's foreground colour changes upon hover. That also happens on the Secondary Side Bar tab icons, and on the Panel tab labels. /assign
I asked this question last week at I assume that this means it's not supported yet, or rather undocumented?
Per , I'd like the ability to theme the entire activity bar when it's in top position, particularly to assign background and foreground colors independently of the sidebar (and also independently of the activity bar in side position). Personally, I'd prefer to be able to style it according to the same behavior that the side-position activity bar has: the bar has its own background color, the active item has a different background color, and active and inactive icons have independent foreground colors. In particular, I'd want equivalents to at least the following theme colors: - - Probably the rest of the activity bar colors should have top-position equivalents as well, but I happen not to use them. My reading of OP is that wants the top activity bar to be styled more like a list of buttons with the side bar's background color, similar to how input options work. I'm not sure whether those are mutually exclusive requirements, but if it's possible to make both available, it should be the theme that makes the decision of which to use, not a user setting.
I can't understand your needs, but add a mouseover background color, a mouseover foreground color, and a mouseover border color for the button is the most basic need.
Added following colors to customise acitivity bar item when it is on top like below <img width="338" alt="image" src=""
The following foreground colors have existed in previous versions, in vscode 1.84 and earlier.
Even if the properties are set to different names, the same effect can be achieved. Why reinvent the wheel?
The above approach cannot achieve the following requirements:
This list of colors (nor also in ) doesn't seem to allow coloring the background of the activity bar independent of the sidebar. I want to emphasize the activity bar as a separate control, similar to sidebar section headers. I also agree that it doesn't solve request for a hover background color. should we open separate issues as feature requests now that this one is closed?
The following foreground colors have existed in previous versions, in vscode 1.84 and earlier. "workbench.colorCustomizations": { "activityBarTop.foreground": "", "activityBarTop.activeBorder": "#", "activityBarTop.inactiveForeground": "#", },
mouseover foreground color is supported by - This is same in all places activity bar on top secondary side bar panel mouseover background and mouseover border color is not supported in any of the above places. Hence they are not supported.
Hence why we are asking for them. As well as non-mouseover background colors for the activity bar on the top, like it has when it is on the side.
Please file a separate issue for the other colours which you would like to want.
I created for the colors I'd like. Thanks for your patience, Please don't be disrespectful. Comments like that will get no one anything they want. This community has a code of conduct available at I suggest you read, understand, and follow it, particularly the portions regarding acceptable and unacceptable behavior. Derogatory personal attacks are in the latter category.
Verified that "activityBarTop.foreground" works

Discussion:
"--vscode-notificationsWarningIcon-foreground", "--vscode-outputView-background", "--vscode-outputViewStickyScroll-background", <ins> "--vscode-activityBarTop-activeBorder", "--vscode-activityBarTop-foreground", </ins> "--vscode-panel-background", "--vscode-panel-border", "--vscode-panel-dropBorder",

flex: 1; } <ins> .monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before, .monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before { border-top-color: var(--vscode-panelTitle-activeBorder) !important; } </ins> .monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label, .monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .action-label { color: var(--vscode-sideBarTitle-foreground) !important;

.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before { border-top-color: var(--vscode-focusBorder) !important; } <del> .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before, .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before { border-top-color: var(--vscode-panelTitle-activeBorder) !important; } </del> .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {

background-color: inherit; } <ins> .monaco-workbench .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before, .monaco-workbench .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before { border-top-color: var(--vscode-panelTitle-activeBorder) !important; } </ins> .monaco-workbench .part.panel > .title > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item:focus .action-label, .monaco-workbench .part.panel > .title > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item:hover .action-label { color: var(--vscode-panelTitle-activeForeground) !important;

height: 16px; } <ins> .monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before, .monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before { border-top-color: var(--vscode-activityBarTop-activeBorder) !important; } .monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label, .monaco-workbench .part.sidebar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .action-label { color: var(--vscode-activityBarTop-foreground) !important; } </ins> .monaco-workbench .sidebar.pane-composite-part > .title > .composite-bar-container { flex: 1; }

import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; <del> import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_BORDER, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND } from 'vs/workbench/common/theme'; </del> <ins> import { SIDE_BAR_TITLE_FOREGROUND, 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 'vs/workbench/common/theme'; </ins> import { INotificationService } from 'vs/platform/notification/common/notification'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';

colors: theme => ({ activeBackgroundColor: theme.getColor(SIDE_BAR_BACKGROUND), inactiveBackgroundColor: theme.getColor(SIDE_BAR_BACKGROUND), <del> activeBorderBottomColor: theme.getColor(PANEL_ACTIVE_TITLE_BORDER), activeForegroundColor: theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND), inactiveForegroundColor: theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND), </del> <ins> activeBorderBottomColor: theme.getColor(ACTIVITY_BAR_TOP_ACTIVE_BORDER), activeForegroundColor: theme.getColor(ACTIVITY_BAR_TOP_FOREGROUND), inactiveForegroundColor: theme.getColor(ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND), </ins> badgeBackground: theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND), badgeForeground: theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND), <del> dragAndDropBorder: theme.getColor(PANEL_DRAG_AND_DROP_BORDER) </del> <ins> dragAndDropBorder: theme.getColor(ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER) </ins> }), compact: true };

hcLight: PANEL_ACTIVE_TITLE_FOREGROUND }, localize('panelDragAndDropBorder', "Drag and drop feedback color for the panel titles. Panels are shown below the editor area and contain views like output and integrated terminal.")); export const PANEL_SECTION_DRAG_AND_DROP_BACKGROUND = registerColor('panelSection.dropBackground', { dark: EDITOR_DRAG_AND_DROP_BACKGROUND, light: EDITOR_DRAG_AND_DROP_BACKGROUND,

hcLight: Color.white }, localize('activityBarBadgeForeground', "Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); <ins> export const ACTIVITY_BAR_TOP_FOREGROUND = registerColor('activityBarTop.foreground', { dark: '#E7E7E7', light: '#424242', hcDark: Color.white, hcLight: editorForeground }, localize('activityBarTop', "Active foreground color of the item in the Activity bar when it is on top. The activity allows to switch between views of the side bar.")); export const ACTIVITY_BAR_TOP_ACTIVE_BORDER = registerColor('activityBarTop.activeBorder', { dark: ACTIVITY_BAR_TOP_FOREGROUND, light: ACTIVITY_BAR_TOP_FOREGROUND, hcDark: contrastBorder, hcLight: '#B5200D' }, localize('activityBarTopActiveFocusBorder', "Focus border color for the active item in the Activity bar when it is on top. The activity allows to switch between views of the side bar.")); export const ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND = registerColor('activityBarTop.inactiveForeground', { dark: transparent(ACTIVITY_BAR_TOP_FOREGROUND, 0.6), light: transparent(ACTIVITY_BAR_TOP_FOREGROUND, 0.75), hcDark: Color.white, hcLight: editorForeground }, localize('activityBarTopInActiveForeground', "Inactive foreground color of the item in the Activity bar when it is on top. The activity allows to switch between views of the side bar.")); export const ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER = registerColor('activityBarTop.dropBorder', { dark: ACTIVITY_BAR_TOP_FOREGROUND, light: ACTIVITY_BAR_TOP_FOREGROUND, hcDark: ACTIVITY_BAR_TOP_FOREGROUND, hcLight: ACTIVITY_BAR_TOP_FOREGROUND }, localize('activityBarTopDragAndDropBorder', "Drag and drop feedback color for the items in the Activity bar when it is on top. The activity allows to switch between views of the side bar.")); </ins> // < --- Profiles --- > export const PROFILE_BADGE_BACKGROUND = registerColor('profileBadge.background', {