From e80df143080b6ea257d3e8c0beb9ebefbacef305 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Thu, 5 Feb 2026 12:40:17 +0000 Subject: [PATCH] theme - update color values for command center and editor widgets in dark and light themes --- extensions/theme-2026/themes/2026-dark.json | 8 ++-- extensions/theme-2026/themes/2026-light.json | 32 ++++++------- extensions/theme-2026/themes/styles.css | 49 +++++++++++++++----- 3 files changed, 57 insertions(+), 32 deletions(-) diff --git a/extensions/theme-2026/themes/2026-dark.json b/extensions/theme-2026/themes/2026-dark.json index 95730ae8713..b2c2397fb09 100644 --- a/extensions/theme-2026/themes/2026-dark.json +++ b/extensions/theme-2026/themes/2026-dark.json @@ -96,8 +96,8 @@ "commandCenter.foreground": "#bfbfbf", "commandCenter.activeForeground": "#bfbfbf", "commandCenter.background": "#191A1B", - "commandCenter.activeBackground": "#5a5d5e2f", - "commandCenter.border": "#333536BB", + "commandCenter.activeBackground": "#252627", + "commandCenter.border": "#2E3031", "editor.background": "#121314", "editor.foreground": "#BBBEBF", "editorLineNumber.foreground": "#858889", @@ -122,7 +122,7 @@ "editorCodeLens.foreground": "#888888", "editorBracketMatch.background": "#3994BC55", "editorBracketMatch.border": "#2A2B2CFF", - "editorWidget.background": "#202122AA", + "editorWidget.background": "#202122", "editorWidget.border": "#2A2B2CFF", "editorWidget.foreground": "#bfbfbf", "editorSuggestWidget.background": "#202122", @@ -130,7 +130,7 @@ "editorSuggestWidget.foreground": "#bfbfbf", "editorSuggestWidget.highlightForeground": "#bfbfbf", "editorSuggestWidget.selectedBackground": "#3994BC26", - "editorHoverWidget.background": "#20212266", + "editorHoverWidget.background": "#202122", "editorHoverWidget.border": "#2A2B2CFF", "peekView.border": "#2A2B2CFF", "peekViewEditor.background": "#191A1B", diff --git a/extensions/theme-2026/themes/2026-light.json b/extensions/theme-2026/themes/2026-light.json index 0e34cf29aa2..4c08f11ca7b 100644 --- a/extensions/theme-2026/themes/2026-light.json +++ b/extensions/theme-2026/themes/2026-light.json @@ -103,9 +103,9 @@ "menu.border": "#F2F3F4FF", "commandCenter.foreground": "#202020", "commandCenter.activeForeground": "#202020", - "commandCenter.background": "#FFFFFF00", - "commandCenter.activeBackground": "#E8ECF2B3", - "commandCenter.border": "#D8D8D899", + "commandCenter.background": "#FAFAFD", + "commandCenter.activeBackground": "#E8ECF2", + "commandCenter.border": "#D8D8D8", "editor.background": "#FFFFFF", "editor.foreground": "#202020", "editorLineNumber.foreground": "#666666", @@ -130,26 +130,26 @@ "editorCodeLens.foreground": "#666666", "editorBracketMatch.background": "#0069CC40", "editorBracketMatch.border": "#F2F3F4FF", - "editorWidget.background": "#E8ECF2E6", + "editorWidget.background": "#E8ECF2", "editorWidget.border": "#F2F3F4FF", "editorWidget.foreground": "#202020", - "editorSuggestWidget.background": "#E8ECF2E6", + "editorSuggestWidget.background": "#E8ECF2", "editorSuggestWidget.border": "#F2F3F4FF", "editorSuggestWidget.foreground": "#202020", "editorSuggestWidget.highlightForeground": "#0069CC", "editorSuggestWidget.selectedBackground": "#0069CC26", - "editorHoverWidget.background": "#E8ECF2E6", + "editorHoverWidget.background": "#E8ECF2", "editorHoverWidget.border": "#F2F3F4FF", "peekView.border": "#0069CC", - "peekViewEditor.background": "#E8ECF2E6", + "peekViewEditor.background": "#E8ECF2", "peekViewEditor.matchHighlightBackground": "#0069CC33", - "peekViewResult.background": "#E8ECF2E6", + "peekViewResult.background": "#E8ECF2", "peekViewResult.fileForeground": "#202020", "peekViewResult.lineForeground": "#666666", "peekViewResult.matchHighlightBackground": "#0069CC33", "peekViewResult.selectionBackground": "#0069CC26", "peekViewResult.selectionForeground": "#202020", - "peekViewTitle.background": "#E8ECF2E6", + "peekViewTitle.background": "#E8ECF2", "peekViewTitleDescription.foreground": "#666666", "peekViewTitleLabel.foreground": "#202020", "editorGutter.addedBackground": "#587c0c", @@ -203,13 +203,13 @@ "breadcrumb.background": "#FAFAFD", "breadcrumb.focusForeground": "#202020", "breadcrumb.activeSelectionForeground": "#202020", - "breadcrumbPicker.background": "#E8ECF2E6", + "breadcrumbPicker.background": "#E8ECF2", "notificationCenter.border": "#F2F3F4FF", "notificationCenterHeader.foreground": "#202020", - "notificationCenterHeader.background": "#E8ECF2E6", + "notificationCenterHeader.background": "#E8ECF2", "notificationToast.border": "#F2F3F4FF", "notifications.foreground": "#202020", - "notifications.background": "#E8ECF2E6", + "notifications.background": "#E8ECF2", "notifications.border": "#F2F3F4FF", "notificationLink.foreground": "#0069CC", "notificationsWarningIcon.foreground": "#B69500", @@ -224,12 +224,12 @@ "extensionButton.prominentHoverBackground": "#0064CC", "pickerGroup.border": "#F2F3F4FF", "pickerGroup.foreground": "#202020", - "quickInput.background": "#E8ECF2E6", + "quickInput.background": "#E8ECF2", "quickInput.foreground": "#202020", "quickInputList.focusBackground": "#0069CC1A", "quickInputList.focusForeground": "#202020", "quickInputList.focusIconForeground": "#202020", - "quickInputList.hoverBackground": "#EDF0F5E6", + "quickInputList.hoverBackground": "#EDF0F5", "terminal.selectionBackground": "#0069CC26", "terminalCursor.foreground": "#202020", "terminalCursor.background": "#FFFFFF", @@ -241,7 +241,7 @@ "gitDecoration.conflictingResourceForeground": "#ad0707", "gitDecoration.stageModifiedResourceForeground": "#667309", "gitDecoration.stageDeletedResourceForeground": "#ad0707", - "commandCenter.activeBorder": "#D8D8D8A6", + "commandCenter.activeBorder": "#D8D8D8", "quickInput.border": "#D8D8D8", "gauge.foreground": "#0069CC", "gauge.background": "#0069CC40", @@ -251,7 +251,7 @@ "gauge.errorForeground": "#ad0707", "gauge.errorBackground": "#ad070740", "statusBarItem.prominentHoverForeground": "#FFFFFF", - "quickInputTitle.background": "#E8ECF2E6", + "quickInputTitle.background": "#E8ECF2", "chat.requestBubbleBackground": "#EEF4FB", "chat.requestBubbleHoverBackground": "#E6EDFA", "editorCommentsWidget.rangeBackground": "#EEF4FB", diff --git a/extensions/theme-2026/themes/styles.css b/extensions/theme-2026/themes/styles.css index 065a8f519d6..2439b4c4221 100644 --- a/extensions/theme-2026/themes/styles.css +++ b/extensions/theme-2026/themes/styles.css @@ -181,7 +181,7 @@ .monaco-workbench .quick-input-widget { box-shadow: var(--shadow-xl) !important; border-radius: 12px; - background-color: color-mix(in srgb, var(--vscode-quickInput-background) 30%, transparent) !important; + background-color: color-mix(in srgb, var(--vscode-quickInput-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-lg); -webkit-backdrop-filter: var(--backdrop-blur-lg); -webkit-backdrop-filter: blur(40px) saturate(180%); @@ -219,9 +219,9 @@ border-radius: 6px; } -.monaco-workbench .quick-input-widget .monaco-list.list_id_6:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused) { +/* .monaco-workbench .quick-input-widget .monaco-list.list_id_6:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused) { background-color: color-mix(in srgb, var(--vscode-list-hoverBackground) 40%, transparent); -} +} */ /* Chat Widget */ .monaco-workbench .interactive-session .chat-input-container { @@ -262,6 +262,11 @@ .monaco-workbench .notification-toast-container { backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); + background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; +} + +.monaco-workbench.vs-dark .notification-toast-container { + background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; } .monaco-workbench .notification-toast-container .notification-toast { @@ -271,6 +276,11 @@ .monaco-workbench .notifications-center { backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); + background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; +} + +.monaco-workbench.vs-dark .notifications-center { + background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; } .monaco-workbench .notifications-list-container, @@ -295,7 +305,7 @@ } .monaco-workbench .action-widget { - background: color-mix(in srgb, var(--vscode-menu-background) 50%, transparent) !important; + background: color-mix(in srgb, var(--vscode-menu-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); } @@ -311,10 +321,11 @@ border-radius: var(--radius-xl); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); + background: color-mix(in srgb, var(--vscode-editorSuggestWidget-background) 60%, transparent) !important; } .monaco-workbench.vs-dark .monaco-editor .suggest-widget { - background: color-mix(in srgb, var(--vscode-editorWidget-background) 40%, transparent) !important; + background: color-mix(in srgb, var(--vscode-editorSuggestWidget-background) 60%, transparent) !important; border: 1px solid var(--vscode-editorWidget-border); } @@ -346,11 +357,15 @@ .monaco-workbench .monaco-editor .peekview-widget { box-shadow: var(--shadow-hover); border: none; - background: var(--vscode-editor-background) !important; + background: color-mix(in srgb, var(--vscode-peekViewEditor-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-sm); -webkit-backdrop-filter: var(--backdrop-blur-sm); } +.monaco-workbench.vs-dark .monaco-editor .peekview-widget { + background: color-mix(in srgb, var(--vscode-peekViewEditor-background) 60%, transparent) !important; +} + .monaco-workbench .monaco-editor .peekview-widget .head, .monaco-workbench .monaco-editor .peekview-widget .body { background: transparent !important; @@ -421,7 +436,15 @@ } /* Breadcrumbs */ -.monaco-workbench.vs-dark .part.editor > .content .editor-group-container > .title .breadcrumbs-control, +.monaco-workbench .breadcrumbs-picker-widget { + backdrop-filter: var(--backdrop-blur-md); + -webkit-backdrop-filter: var(--backdrop-blur-md); + background: color-mix(in srgb, var(--vscode-breadcrumbPicker-background) 60%, transparent) !important; +} + +.monaco-workbench.vs-dark .breadcrumbs-picker-widget { + background: color-mix(in srgb, var(--vscode-breadcrumbPicker-background) 60%, transparent) !important; +} /* Input Boxes */ .monaco-workbench .monaco-inputbox, @@ -534,7 +557,7 @@ .monaco-workbench.vs-dark .monaco-editor .parameter-hints-widget, .monaco-workbench.vs .monaco-editor .parameter-hints-widget { - background: color-mix(in srgb, var(--vscode-editorWidget-background) 70%, transparent) !important; + background: color-mix(in srgb, var(--vscode-editorWidget-background) 60%, transparent) !important; } /* Minimap */ @@ -559,7 +582,7 @@ .monaco-workbench .monaco-editor .sticky-widget { box-shadow: var(--shadow-md) !important; border-bottom: none !important; - background: color-mix(in srgb, var(--vscode-editor-background) 75%, transparent) !important; + background: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; } @@ -578,7 +601,7 @@ .monaco-workbench .monaco-editor .sticky-scroll-focus-line, .monaco-workbench .monaco-editor .focused .sticky-widget, .monaco-workbench .monaco-editor:has(.sticky-widget:focus-within) .sticky-widget { - background: color-mix(in srgb, var(--vscode-editor-background) 75%, transparent) !important; + background: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; box-shadow: var(--shadow-hover) !important; @@ -588,7 +611,7 @@ .monaco-workbench .monaco-editor .sticky-widget .sticky-line-number { backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; - background-color: color-mix(in srgb, var(--vscode-editor-background) 70%, transparent); + background-color: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent); } .monaco-workbench.vs-dark .monaco-editor .sticky-widget .sticky-line-content, @@ -637,12 +660,14 @@ .monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center { box-shadow: inset var(--shadow-sm) !important; border-radius: var(--radius-lg) !important; - backdrop-filter: var(--backdrop-blur-md); + background: color-mix(in srgb, var(--vscode-commandCenter-background) 60%, transparent) !important; -webkit-backdrop-filter: var(--backdrop-blur-md); + backdrop-filter: var(--backdrop-blur-md); } .monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center:hover { box-shadow: inset var(--shadow-sm) !important; + background: color-mix(in srgb, var(--vscode-commandCenter-activeBackground) 60%, transparent) !important; } .monaco-workbench .part.titlebar .command-center .agent-status-pill {