mirror of
https://github.com/microsoft/vscode.git
synced 2026-02-24 11:47:43 +00:00
619c243e4d
* Add hover colors for side/top/bottom activity bar in theme and styles
Modified Files Summary
1. Theme Color Definition
[src/vs/workbench/common/theme.ts]
- Define new theme color tokens:
- `ACTIVITY_BAR_HOVER_FOREGROUND`
- `ACTIVITY_BAR_HOVER_BACKGROUND`
- `ACTIVITY_BAR_TOP_HOVER_FOREGROUND`
- `ACTIVITY_BAR_TOP_HOVER_BACKGROUND`
2. Activity Bar: Theming + Wiring
[src/vs/workbench/browser/parts/activitybar/activitybarPart.ts]
- Register new hover tokens in theme registry
- Map hover tokens to CSS variables for stylesheet consumption
- Wire hover colors into composite bar configuration
3. Activity Bar CSS (Hover Styles)
[src/vs/workbench/browser/parts/activitybar/media/activityaction.css]
- Apply hover styles using new CSS variables:
- `--vscode-activityBar-hoverForeground`
- `--vscode-activityBar-hoverBackground`
- Integrate hover states with existing active/focus styling
4. Sidebar: Theming Integration
[src/vs/workbench/browser/parts/sidebar/sidebarPart.ts]
- Reference top-position hover tokens for consistency:
- `ACTIVITY_BAR_TOP_HOVER_FOREGROUND`
- `ACTIVITY_BAR_TOP_HOVER_BACKGROUND`
- Ensure sidebar hover behavior aligns with activity bar when positioned at top or bottom
5. Sidebar CSS (Hover Styles)
`src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css`
- Apply hover styling using activity bar CSS variables
- Maintain visual consistency between sidebar and activity bar hover states
6. Stylelint Allowlist
[build/lib/stylelint/vscode-known-variables.json]
- Add CSS custom properties to prevent lint errors:
- `--vscode-activityBar-hoverForeground`
- `--vscode-activityBar-hoverBackground`
Usage
settings.json
{
"workbench.activityBar.location": "default", // "top"
"workbench.colorCustomizations": {
// Left Activity Bar
"activityBar.hoverForeground": "#ff0000",
"activityBar.hoverBackground": "#00ff00",
// Top Activity Bar
"activityBarTop.hoverForeground": "#0000ff",
"activityBarTop.hoverBackground": "#ffff00"
}
}
* refactor: move default colors to theme.ts and remove CSS fallbacks in activityaction.css and sidebarpart.css, per feedback.
---------
Co-authored-by: Benjamin Christopher Simmonds <44439583+benibenj@users.noreply.github.com>