Change:
The original designs had something closer to this for the default background color. IMO it isn't trying to be an icon like the other items and the border makes it feel like an icon vs. a unique element. I also think the background and foreground should be the only customizable elements to start. I think I saw a foreground token, but not sure it was possible to do background yet. <img width="247" alt="CleanShot 2022-09-26 at 16 29 09 src="https://user-"
I also like this more over the border For example here this looks not too different from the actions above even though it is about profiles: <img width="297" alt="image" src="https://user-"
!
I like it but maybe with smaller font size? Here is with for example: !
Current font size goes well with all (emoji, codicons) and also symmetric with activity bar icons.

Discussion:
// "activityBar.foreground": "", // "activityBarBadge.background": "", // "activityBarBadge.foreground": "", <ins> "activityBarItem.settingsProfilesBackground": "#082877", </ins> // Workbench: Panel // "panel.background": "",

"$schema": "vscode://schemas/color-theme", "name": "Light (Visual Studio)", "colors": { <ins> "activityBarItem.settingsProfilesBackground": "#4d4d4d", </ins> "editor.background": "#FFFFFF", "editor.foreground": "#000000", "editor.inactiveSelectionBackground": "#E5EBF1",

"ports.iconRunningProcessForeground": "#369432", "activityBar.background": "#221a0f", "activityBar.foreground": "#d3af86", <ins> "activityBarItem.settingsProfilesBackground": "#47351d", </ins> "sideBar.background": "#362712", "menu.background": "#362712", "menu.foreground": "#CCCCCC",

"statusBar.noFolderBackground": "#001126", "statusBar.debuggingBackground": "#001126", "activityBar.background": "#001733", <ins> "activityBarItem.settingsProfilesBackground": "#003271", </ins> "progressBar.background": "#bbdaffcc", "badge.background": "#bbdaffcc", "badge.foreground": "#001733",

import { ActivityAction, ActivityActionViewItem, IActivityActionViewItemOptions, IActivityHoverOptions, ICompositeBar, ICompositeBarColors, ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositeBarActions'; import { CATEGORIES } from 'vs/workbench/common/actions'; import { IActivity } from 'vs/workbench/common/activity'; <del> import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_SETTINGS_PROFILE_HOVER_FOREGROUND } from 'vs/workbench/common/theme'; </del> <ins> import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_SETTINGS_PROFILE_BACKGROUND, ACTIVITY_BAR_SETTINGS_PROFILE_HOVER_FOREGROUND } from 'vs/workbench/common/theme'; </ins> import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { createAndFillInActionBarActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';

`); } <del> const activityBarSettingsProfileHoveFgColor = theme.getColor(ACTIVITY_BAR_SETTINGS_PROFILE_HOVER_FOREGROUND); if (activityBarSettingsProfileHoveFgColor) { </del> <ins> const activityBarSettingsProfileBgColor = theme.getColor(ACTIVITY_BAR_SETTINGS_PROFILE_BACKGROUND); if (activityBarSettingsProfileBgColor) { collector.addRule(` .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item .action-label.profile-activity-item, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item .action-label.profile-activity-item, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item .action-label.profile-activity-item { background-color: ${activityBarSettingsProfileBgColor} !important; } `); } const activityBarSettingsProfileHoverFgColor = theme.getColor(ACTIVITY_BAR_SETTINGS_PROFILE_HOVER_FOREGROUND); if (activityBarSettingsProfileHoverFgColor) { </ins> collector.addRule(` .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label.profile-activity-item, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.profile-activity-item, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.profile-activity-item { <del> color: ${activityBarSettingsProfileHoveFgColor} !important; </del> <ins> color: ${activityBarSettingsProfileHoverFgColor} !important; </ins> } `); }

.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label.profile-activity-item { height: 20px; <del> width: 28px; margin: 14px 10px; </del> <ins> width: 32px; margin: 14px 8px; </ins> padding: 0px; justify-content: center; align-items: center; <del> font-size: 12px; </del> <ins> font-size: 14px; </ins> line-height: 16px; <del> border: 2px solid; </del> <ins> border-radius: 8px; </ins> } /* Right aligned */

hcLight: ACTIVITY_BAR_FOREGROUND }, localize('activityBarItem.settingsProfilesHoverForeground', "Foreground color for the settings profile entry on the activity bar when hovering.")); <ins> export const ACTIVITY_BAR_SETTINGS_PROFILE_BACKGROUND = registerColor('activityBarItem.settingsProfilesBackground', { dark: lighten(ACTIVITY_BAR_BACKGROUND, 0.5), light: darken(ACTIVITY_BAR_BACKGROUND, 0.12), hcDark: null, hcLight: null }, localize('statusBarItemSettingsProfileBackground', "Background color for the settings profile entry on the activity bar.")); </ins> // < --- Remote --- > export const STATUS_BAR_HOST_NAME_BACKGROUND = registerColor('statusBarItem.remoteBackground', {