Improve UI consistency in light and dark modes by mrleemurray · Pull Request #289121 · microsoft/vscode

mrleemurray · 2026-01-20T14:58:02Z

Update color theme settings and refactor theme styles to enhance UI consistency across light and dark modes, including new styles for notifications and sashes.

…dark modes

…for notifications and sashes

Copilot

Pull request overview

This PR updates the 2026 theme to improve UI consistency across light and dark modes. The changes refactor theme color values and CSS styles, with a focus on notifications, sashes, and various UI elements.

Changes:

Refactored notification styles with new backdrop filter effects and transparent backgrounds
Updated color values in light theme from #E9E9E9 to #EDEDED and border colors from transparent (#EEEEEE00) to semi-transparent (#ECEDEEFF)
Removed high-contrast (hc-black) theme support from multiple UI components
Added new styles for sashes, hover widgets, and dialog modals

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 12 comments.

File	Description
extensions/theme-2026/themes/styles.css	Refactored notification styles, added sash z-index rules, removed hc-black theme support from multiple components, added hover and dialog styles
extensions/theme-2026/themes/2026-light.json	Updated color values for consistency, changed many border colors from fully transparent to semi-transparent, adjusted hover and selection colors
extensions/theme-2026/themes/2026-dark.json	Changed statusBarItem.activeBackground from blue accent to neutral gray

Copilot · 2026-01-20T15:01:54Z

 .monaco-workbench.vs-dark .monaco-editor .minimap,
-.monaco-workbench.hc-black .monaco-editor .minimap { background: rgba(5, 5, 6, 0.85) !important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.10) !important; }
 .monaco-workbench .monaco-editor .minimap-shadow-visible { box-shadow: 0 0 6px rgba(0, 0, 0, 0.10); }


This selector chain appears incomplete. Line 199 starts with a selector for dark mode minimap but line 200 immediately transitions to another selector without any rule body or closing brace for the dark mode selector.

Copilot · 2026-01-20T15:01:54Z

 /* Buttons */
 .monaco-workbench .monaco-button { box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); }
-.monaco-workbench .monaco-button:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); }
+.monaco-workbench .monaco-button:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);  }


There is trailing whitespace before the closing brace. This should be removed for consistency and cleaner code.

Suggested change

.monaco-workbench .monaco-button:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); }

.monaco-workbench .monaco-button:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); }

Copilot · 2026-01-20T15:01:54Z

-		"editor.rangeHighlightBackground": "#E9E9E9",
+		"editor.findRangeHighlightBackground": "#EDEDED",
+		"editor.hoverHighlightBackground": "#EDEDED",
+		"editor.lineHighlightBackground": "#EDEDED55",


The transparency value is inconsistent. The color '#EDEDED55' has a 55 alpha value (33% opacity) while most other colors in the theme use either no transparency or predefined transparency values like 26, 33, etc. Consider using a standard transparency value like '33' for consistency.

Suggested change

"editor.lineHighlightBackground": "#EDEDED55",

"editor.lineHighlightBackground": "#EDEDED33",

Copilot · 2026-01-20T15:01:55Z

-		"editorHoverWidget.background": "#FCFCFC",
-		"editorHoverWidget.border": "#EEEEEE00",
-		"peekView.border": "#EEEEEE00",
+		"editorHoverWidget.background": "#FCFCFC55",


The transparency value is inconsistent. The color '#FCFCFC55' has a 55 alpha value (33% opacity) while most other colors in the theme use either no transparency or predefined transparency values. Consider using a standard transparency value for consistency.

Suggested change

"editorHoverWidget.background": "#FCFCFC55",

"editorHoverWidget.background": "#FCFCFC",

Copilot · 2026-01-20T15:01:55Z

 .monaco-workbench.vs-dark .monaco-editor .parameter-hints-widget,
-.monaco-workbench.hc-black .monaco-editor .parameter-hints-widget { background: rgba(10, 10, 11, 0.85) !important; }
 .monaco-workbench.vs .monaco-editor .parameter-hints-widget { background: rgba(252, 252, 253, 0.85) !important; }


This selector chain appears incomplete. Line 193 starts with selectors for dark mode parameter hints but line 194 immediately transitions to light mode without any rule body or closing brace for the dark mode selector.

Copilot · 2026-01-20T15:01:55Z

+	backdrop-filter: blur(20px) saturate(180%);
+	-webkit-backdrop-filter: blur(20px) saturate(180%);
+	background-color: rgba(255, 255, 255, 0.6) !important;
+


There is an empty line inside this rule block. Consider removing it for cleaner formatting.

Suggested change

Copilot · 2026-01-20T15:01:56Z

+
+}


The notification center background is hard-coded to a light color (rgba(255, 255, 255, 0.6)) which will not work correctly in dark mode. This should use a theme-aware color or have a separate dark mode rule.

Suggested change

}

}

.monaco-workbench.vs-dark .notifications-center {

background-color: rgba(0, 0, 0, 0.6) !important;

}

Copilot · 2026-01-20T15:01:56Z

+.monaco-workbench .quick-input-widget .monaco-list-row { border-color: transparent !important; outline: none !important; }
 .monaco-workbench .quick-input-widget .monaco-inputbox { box-shadow: none !important; background: transparent !important; }
 .monaco-workbench .quick-input-widget .quick-input-filter .monaco-inputbox { background: rgba(249, 250, 251, 0.4) !important; border-radius: 6px; }
 .monaco-workbench.vs-dark .quick-input-widget .quick-input-filter .monaco-inputbox,


This line appears to be incomplete. Line 74 starts a selector for dark mode quick input but has no closing brace or continuation. The selector chain is broken, ending with a comma but no subsequent selector or rule body.

Suggested change

.monaco-workbench.vs-dark .quick-input-widget .quick-input-filter .monaco-inputbox,

/* .monaco-workbench.vs-dark .quick-input-widget .quick-input-filter .monaco-inputbox, */

Copilot · 2026-01-20T15:01:56Z

 .monaco-workbench .interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor,
-.monaco-workbench .interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor .monaco-editor-background { background-color: var(--vscode-panel-background, var(--vscode-sideBar-background)) !important; }
 .monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { border-radius: 4px 4px 0 0; }


This line appears to be incomplete. Line 80 starts a selector for chat widget editor but has no closing brace or continuation. The selector chain is broken, ending without a rule body.

Copilot · 2026-01-20T15:01:57Z


 /* Breadcrumbs */
 .monaco-workbench .part.editor > .content .editor-group-container > .title .breadcrumbs-control { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08) !important; background: rgba(252, 252, 253, 0.65) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; }
 .monaco-workbench.vs-dark .part.editor > .content .editor-group-container > .title .breadcrumbs-control,


This line appears to be incomplete. Line 159 starts a selector for dark mode breadcrumbs but has no closing brace or continuation. The selector chain is broken, ending with a comma but no subsequent selector or rule body.

Suggested change

.monaco-workbench.vs-dark .part.editor > .content .editor-group-container > .title .breadcrumbs-control,

.monaco-workbench.vs-dark .part.editor > .content .editor-group-container > .title .breadcrumbs-control {}

mrleemurray added 2 commits January 20, 2026 11:27

update color theme settings for improved UI consistency in light and …

90901bd

…dark modes

refactor theme styles for improved UI consistency and add new styles …

33e2f28

…for notifications and sashes

Copilot AI review requested due to automatic review settings January 20, 2026 14:58

mrleemurray enabled auto-merge January 20, 2026 14:58

mrleemurray self-assigned this Jan 20, 2026

mrleemurray added this to the January 2026 milestone Jan 20, 2026

Copilot started reviewing on behalf of mrleemurray January 20, 2026 14:58 View session

Copilot AI reviewed Jan 20, 2026

View reviewed changes

dbaeumer approved these changes Jan 20, 2026

View reviewed changes

mrleemurray merged commit 1c03cca into main Jan 20, 2026
28 checks passed

mrleemurray deleted the mrleemurray/graceful-mastodon-ivory branch January 20, 2026 16:11

mrleemurray mentioned this pull request Feb 17, 2026

2026 Themes — Tracking Issue #295783

Open

99 tasks

vs-code-engineering bot locked and limited conversation to collaborators Mar 6, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve UI consistency in light and dark modes#289121

Improve UI consistency in light and dark modes#289121
mrleemurray merged 2 commits intomainfrom
mrleemurray/graceful-mastodon-ivory

mrleemurray commented Jan 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	.monaco-workbench .monaco-button:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); }
	.monaco-workbench .monaco-button:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); }

	"editor.lineHighlightBackground": "#EDEDED55",
	"editor.lineHighlightBackground": "#EDEDED33",

	"editorHoverWidget.background": "#FCFCFC55",
	"editorHoverWidget.background": "#FCFCFC",

-}
+}
+.monaco-workbench.vs-dark .notifications-center {
+	background-color: rgba(0, 0, 0, 0.6) !important;
+}

	.monaco-workbench.vs-dark .quick-input-widget .quick-input-filter .monaco-inputbox,
	/* .monaco-workbench.vs-dark .quick-input-widget .quick-input-filter .monaco-inputbox, */

	.monaco-workbench.vs-dark .part.editor > .content .editor-group-container > .title .breadcrumbs-control,
	.monaco-workbench.vs-dark .part.editor > .content .editor-group-container > .title .breadcrumbs-control {}

Conversation

mrleemurray commented Jan 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants