Refactor theme and layout for sidebar, panel, and auxiliary components by mrleemurray · Pull Request #304447 · microsoft/vscode

mrleemurray · 2026-03-24T12:40:13Z

Update theme colors and layout margins for sidebar, panel, and auxiliary bar components to enhance visual consistency and usability. Adjust padding and margins across various components, ensuring a cohesive design throughout the application.

Copilot

Pull request overview

This PR adjusts the Agent Sessions window’s visual styling (spacing, borders, and background colors) to better align the sidebar/panel/auxiliary bar with the updated card-like layout, and ensures the terminal background resolves appropriately in the sessions window.

Changes:

Update sessions window part margins/padding and introduce/align inset borders for consistent card spacing.
Shift several sessions window backgrounds to use editorBackground/SIDE_BAR_BACKGROUND for more cohesive theming.
Add a sessions-window-specific terminal background fallback via IWorkbenchEnvironmentService.isSessionsWindow.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/vs/workbench/contrib/terminal/browser/terminalInstance.ts	Sessions window-specific terminal background fallback.
src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css	Increase scrollable padding in sessions workbench context.
src/vs/sessions/contrib/sessions/browser/media/sessionsViewPane.css	Adjust bottom spacing and button container padding.
src/vs/sessions/contrib/sessions/browser/media/customizationsToolbar.css	Update toolbar inset spacing and border token usage.
src/vs/sessions/contrib/accountMenu/browser/media/accountWidget.css	Hide toolbar’s default action label to avoid duplicate UI.
src/vs/sessions/common/theme.ts	Make sessions sidebar/chat title backgrounds default to `editorBackground`; remove sidebar border token.
src/vs/sessions/browser/parts/sidebarPart.ts	Update sidebar colors/border behavior and footer sizing constants.
src/vs/sessions/browser/parts/panelPart.ts	Adjust panel card margins, background/border tokens, and layout sizing.
src/vs/sessions/browser/parts/media/sidebarPart.css	Sessions sidebar footer inset styling + pane header inset border pseudo-element.
src/vs/sessions/browser/parts/media/panelPart.css	Force panel title/editor/terminal backgrounds to match sidebar background token.
src/vs/sessions/browser/parts/media/auxiliaryBarPart.css	Force auxiliary bar title/editor backgrounds to match sidebar background token.
src/vs/sessions/browser/parts/chatBarPart.ts	Align chat bar margins and border token usage with updated card layout behavior.
src/vs/sessions/browser/parts/auxiliaryBarPart.ts	Align auxiliary bar margins and border token usage; adjust layout sizing.
src/vs/sessions/browser/media/style.css	Update global sessions layout margins/backgrounds and sidebar-hidden margin behavior.

src/vs/sessions/browser/parts/sidebarPart.ts

src/vs/sessions/browser/parts/auxiliaryBarPart.ts

benibenj

Wasn't really possible to override colors in the sessions window before but now that should be possible. I think we should use the correct variable name for each part, like var(--vscode-sideBar-background) for sidebar. In some cases it might not be possible and I think we should just create a new sidebar color var(--vscode-sessions-sideBar-background). And we should just make sure the correct default value/inheritance is set

benibenj · 2026-03-24T12:52:54Z

src/vs/workbench/contrib/terminal/browser/terminalInstance.ts

 		if (terminalBackground) {
 			return terminalBackground;
 		}
+		if (this._environmentService.isSessionsWindow) {


This should not be done this way. Instead, the color of PANEL_BACKGROUND should be changed in the sessions windows to be a different color

this._environmentService.isSessionsWindow should almost never be used

Use colorRegistry.updateDefaultColor(PANEL_BACKGROUND, editorBackground); or whatever color you want

benibenj · 2026-03-24T13:06:49Z

src/vs/sessions/browser/media/style.css

 .agent-sessions-workbench .part.sidebar {
-	background: var(--vscode-sideBar-background);
-	border-right: 1px solid var(--vscode-sideBar-border, transparent);
+	background: var(--vscode-editor-background);


can we instead have a sessions sidebar color which is registered and inherits from the editor background color. Same for other parts

benibenj · 2026-03-24T13:08:41Z

src/vs/sessions/browser/parts/media/auxiliaryBarPart.css

+.agent-sessions-workbench .part.auxiliarybar > .content .monaco-editor,
+.agent-sessions-workbench .part.auxiliarybar > .content .monaco-editor .margin,
+.agent-sessions-workbench .part.auxiliarybar > .content .monaco-editor .monaco-editor-background {
+	background-color: var(--vscode-sideBar-background);


same, create seesion aux sidebar color

benibenj · 2026-03-24T13:18:47Z

src/vs/sessions/common/theme.ts

 export const sessionsSidebarHeaderBackground = registerColor(
 	'sessionsSidebarHeader.background',
-	SIDE_BAR_BACKGROUND,
+	editorBackground,


inherit from sessionsSidebarBackground

benibenj · 2026-03-24T13:19:01Z

src/vs/sessions/common/theme.ts

 export const chatBarTitleBackground = registerColor(
 	'chatBarTitle.background',
-	SIDE_BAR_BACKGROUND,
+	editorBackground,


inherit from sessionsSidebarBackground

benibenj · 2026-03-24T13:20:07Z

src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css

 		padding: 0 6px;
 	}

+	.agent-sessions-workbench .pane-body & .monaco-scrollable-element {


this also affects vscode, have you checked if it looks fine there too?

Yes, all good

…omponents Co-authored-by: Copilot <copilot@github.com>

… adjust colors

…components Co-authored-by: Copilot <copilot@github.com>

…nents Co-authored-by: Copilot <copilot@github.com>

… components Co-authored-by: Copilot <copilot@github.com>

…ew pane Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <copilot@github.com>

…ground properties Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

#304447) * refactor: update theme colors for sidebar, panel, and auxiliary bar components Co-authored-by: Copilot <copilot@github.com> * refactor: update sidebar and panel styles to remove right borders and adjust colors * refactor: adjust margin values for chatbar, auxiliary bar, and panel components Co-authored-by: Copilot <copilot@github.com> * refactor: adjust layout margins for chatbar, panel, and sidebar components Co-authored-by: Copilot <copilot@github.com> * refactor: update padding for account widget and agent sessions viewer components Co-authored-by: Copilot <copilot@github.com> * refactor: adjust footer margins and add bottom margin for sessions view pane Co-authored-by: Copilot <copilot@github.com> * Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * refactor: remove unused imports in sidebarPart.ts Co-authored-by: Copilot <copilot@github.com> * refactor: update theme colors for sessions components and adjust background properties Co-authored-by: Copilot <copilot@github.com> --------- Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com> Co-authored-by: Copilot <copilot@github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings March 24, 2026 12:40

mrleemurray enabled auto-merge (squash) March 24, 2026 12:40

mrleemurray self-assigned this Mar 24, 2026

Copilot started reviewing on behalf of mrleemurray March 24, 2026 12:40 View session

vs-code-engineering bot added this to the 1.114.0 milestone Mar 24, 2026

Copilot AI reviewed Mar 24, 2026

View reviewed changes

src/vs/sessions/browser/parts/sidebarPart.ts Outdated Show resolved Hide resolved

src/vs/sessions/browser/parts/auxiliaryBarPart.ts Outdated Show resolved Hide resolved

benibenj disabled auto-merge March 24, 2026 12:51

alexr00 previously approved these changes Mar 24, 2026

View reviewed changes

benibenj requested changes Mar 24, 2026

View reviewed changes

mrleemurray dismissed alexr00’s stale review via 1cf3f64 March 24, 2026 15:51

benibenj enabled auto-merge (squash) March 24, 2026 15:55

mrleemurray and others added 10 commits March 24, 2026 16:00

refactor: update theme colors for sidebar, panel, and auxiliary bar c…

d4044a2

…omponents Co-authored-by: Copilot <copilot@github.com>

refactor: update sidebar and panel styles to remove right borders and…

a8eac77

… adjust colors

refactor: adjust margin values for chatbar, auxiliary bar, and panel …

3925f6f

…components Co-authored-by: Copilot <copilot@github.com>

refactor: adjust layout margins for chatbar, panel, and sidebar compo…

d04b5c9

…nents Co-authored-by: Copilot <copilot@github.com>

refactor: update padding for account widget and agent sessions viewer…

51d6a03

… components Co-authored-by: Copilot <copilot@github.com>

refactor: adjust footer margins and add bottom margin for sessions vi…

d5d3bce

…ew pane Co-authored-by: Copilot <copilot@github.com>

Apply suggestion from @Copilot

190291e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

a5c0524

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

refactor: remove unused imports in sidebarPart.ts

7f50548

Co-authored-by: Copilot <copilot@github.com>

refactor: update theme colors for sessions components and adjust back…

66e2341

…ground properties Co-authored-by: Copilot <copilot@github.com>

mrleemurray force-pushed the mrleemurray/total-black-sheep branch from 1cf3f64 to 66e2341 Compare March 24, 2026 16:02

refactor: adjust layout for sticky container in agent sessions viewer

bcbe6c4

Co-authored-by: Copilot <copilot@github.com>

benibenj approved these changes Mar 24, 2026

View reviewed changes

benibenj merged commit ce19b8e into main Mar 24, 2026
30 of 31 checks passed

benibenj deleted the mrleemurray/total-black-sheep branch March 24, 2026 17:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor theme and layout for sidebar, panel, and auxiliary components#304447

Refactor theme and layout for sidebar, panel, and auxiliary components#304447
benibenj merged 11 commits intomainfrom
mrleemurray/total-black-sheep

mrleemurray commented Mar 24, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

benibenj left a comment

Uh oh!

benibenj Mar 24, 2026

Uh oh!

benibenj Mar 24, 2026

Uh oh!

benibenj Mar 24, 2026

Uh oh!

benibenj Mar 24, 2026

Uh oh!

benibenj Mar 24, 2026

Uh oh!

benibenj Mar 24, 2026

Uh oh!

benibenj Mar 24, 2026

Uh oh!

benibenj Mar 24, 2026

Uh oh!

mrleemurray Mar 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mrleemurray commented Mar 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

benibenj left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants