From b31b8d535b63d670e9c5e6caecb7f536781ae500 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Wed, 4 Mar 2026 15:50:31 +0000 Subject: [PATCH 1/4] update: refine color theme styles and improve CSS for better UI consistency --- extensions/theme-2026/themes/2026-dark.json | 8 +- extensions/theme-2026/themes/2026-light.json | 4 +- extensions/theme-2026/themes/styles.css | 149 ------------------ src/vs/base/browser/ui/inputbox/inputBox.css | 1 + .../browser/viewParts/minimap/minimap.css | 4 + .../notebook/browser/media/notebook.css | 2 +- 6 files changed, 14 insertions(+), 154 deletions(-) diff --git a/extensions/theme-2026/themes/2026-dark.json b/extensions/theme-2026/themes/2026-dark.json index 4645a08fa61..26e6241d748 100644 --- a/extensions/theme-2026/themes/2026-dark.json +++ b/extensions/theme-2026/themes/2026-dark.json @@ -26,7 +26,7 @@ "button.secondaryHoverBackground": "#FFFFFF10", "checkbox.background": "#242526", "checkbox.border": "#333536", - "checkbox.foreground": "#bfbfbf", + "checkbox.foreground": "#8C8C8C", "dropdown.background": "#191A1B", "dropdown.border": "#333536", "dropdown.foreground": "#bfbfbf", @@ -100,12 +100,13 @@ "commandCenter.foreground": "#bfbfbf", "commandCenter.activeForeground": "#bfbfbf", "commandCenter.background": "#191A1B", - "commandCenter.activeBackground": "#252627", + "commandCenter.activeBackground": "#FFFFFF0F", "commandCenter.border": "#2E3031", "editor.background": "#121314", "editor.foreground": "#BBBEBF", "editorStickyScroll.background": "#121314", "editorStickyScrollHover.background": "#202122", + "editorStickyScroll.border": "#2A2B2CFF", "editorLineNumber.foreground": "#858889", "editorLineNumber.activeForeground": "#BBBEBF", "editorCursor.foreground": "#BBBEBF", @@ -266,7 +267,8 @@ "charts.yellow": "#E0B97F", "charts.orange": "#CD861A", "charts.green": "#86CF86", - "charts.purple": "#AD80D7" + "charts.purple": "#AD80D7", + "inlineChat.border": "#00000000" }, "tokenColors": [ { diff --git a/extensions/theme-2026/themes/2026-light.json b/extensions/theme-2026/themes/2026-light.json index f5a8730719e..df59066c02a 100644 --- a/extensions/theme-2026/themes/2026-light.json +++ b/extensions/theme-2026/themes/2026-light.json @@ -28,7 +28,7 @@ "button.secondaryHoverBackground": "#F2F3F4", "checkbox.background": "#EAEAEA", "checkbox.border": "#D8D8D8", - "checkbox.foreground": "#202020", + "checkbox.foreground": "#606060", "dropdown.background": "#FFFFFF", "dropdown.border": "#D8D8D8", "dropdown.foreground": "#202020", @@ -54,6 +54,7 @@ "widget.border": "#EEEEF1", "editorStickyScroll.shadow": "#00000000", "editorStickyScrollHover.background": "#F0F0F3", + "editorStickyScroll.border": "#F0F1F2FF", "sideBarStickyScroll.shadow": "#00000000", "panelStickyScroll.shadow": "#00000000", "listFilterWidget.shadow": "#00000000", @@ -272,6 +273,7 @@ "charts.green": "#388A34", "charts.purple": "#652D90", "agentStatusIndicator.background": "#FFFFFF", + "inlineChat.border": "#00000000" }, "tokenColors": [ { diff --git a/extensions/theme-2026/themes/styles.css b/extensions/theme-2026/themes/styles.css index d76e07491ed..924b770a19f 100644 --- a/extensions/theme-2026/themes/styles.css +++ b/extensions/theme-2026/themes/styles.css @@ -3,15 +3,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -:root { - --radius-sm: 4px; - --radius-lg: 8px; -} - -.monaco-pane-view .split-view-view:first-of-type > .pane > .pane-header { - border-top: 1px solid var(--vscode-sideBarSectionHeader-border) !important; -} - /* Tab border bottom - make transparent */ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container { --tabs-border-bottom-color: transparent !important; @@ -53,143 +44,3 @@ color: var(--vscode-descriptionForeground) !important; border: 1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 50%, transparent) !important; } - -/* Input Boxes */ -.monaco-inputbox .monaco-action-bar .action-item .codicon, -.monaco-workbench .search-container .input-box, -.monaco-custom-toggle { - color: var(--vscode-icon-foreground) !important; -} - -/* Chat input toolbar icons should follow icon foreground token */ -.monaco-workbench .interactive-session .chat-input-toolbars .monaco-action-bar .action-item .codicon, -.monaco-workbench .interactive-session .chat-input-toolbars .action-label .codicon { - color: var(--vscode-icon-foreground) !important; -} - -/* Todo List Widget - remove shadows from buttons */ -.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button, -.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button:hover, -.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button:active, -.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button, -.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button:hover, -.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button:active { - box-shadow: none; -} - -/* Link buttons and tool call buttons - remove shadows */ -.monaco-workbench .monaco-button.link-button, -.monaco-workbench .monaco-button.link-button:hover, -.monaco-workbench .monaco-button.link-button:active, -.monaco-workbench .chat-confirmation-widget-title.monaco-button, -.monaco-workbench .chat-confirmation-widget-title.monaco-button:hover, -.monaco-workbench .chat-confirmation-widget-title.monaco-button:active, -.monaco-workbench .chat-used-context-label .monaco-button, -.monaco-workbench .chat-used-context-label .monaco-button:hover, -.monaco-workbench .chat-used-context-label .monaco-button:active { - box-shadow: none; -} - -.monaco-workbench .debug-hover-widget { - color: var(--vscode-editor-foreground) !important; -} - -.monaco-editor .debug-hover-widget .debug-hover-tree .monaco-list-rows .monaco-list-row:hover:not(.highlighted):not(.selected):not(.focused) { - background-color: var(--vscode-list-hoverBackground); -} - -/* Minimap */ - -.monaco-workbench .monaco-editor .minimap canvas { - opacity: 0.85; -} - -.monaco-workbench.vs-dark .monaco-editor .minimap, -.monaco-workbench .monaco-editor .minimap-shadow-visible { - opacity: 0.85; - background-color: var(--vscode-editor-background); - left: 0; -} - -/* Minimap autohide: ensure opacity:0 overrides the 0.85 above */ -.monaco-workbench .monaco-editor .minimap:is(.minimap-autohide-mouseover, .minimap-autohide-scroll) { - opacity: 0; -} - -.monaco-workbench .monaco-editor .minimap:is(.minimap-autohide-mouseover:hover, .minimap-autohide-scroll.active) { - opacity: 0.85; -} - -/* Sticky Scroll */ -.monaco-workbench .monaco-editor .sticky-widget { - border-bottom: var(--vscode-editorWidget-border) !important; - background: transparent !important; -} - -.monaco-workbench .monaco-editor .sticky-widget > * { - background: transparent !important; -} - -.monaco-workbench.vs-dark .monaco-editor .sticky-widget { - border-bottom: none !important; -} - -.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-lines-scrollable { - background: var(--vscode-editor-background) !important; -} - -.monaco-editor .sticky-widget .sticky-line-content { - background: var(--vscode-editor-background) !important; -} - -.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-line-numbers { - background: var(--vscode-editor-background) !important; -} - -.monaco-workbench .monaco-editor .sticky-widget .sticky-line-content:hover { - background: var(--vscode-editorStickyScrollHover-background) !important; -} - -.monaco-editor .rename-box.preview { - border: 1px solid var(--vscode-editorWidget-border); -} - -/* Notebook */ - -.notebookOverlay .monaco-list-row .cell-title-toolbar { - background-color: var(--vscode-editorWidget-background) !important; -} - -/* Inline Chat */ -.monaco-workbench .monaco-editor .inline-chat { - border: none; -} - -/* Command Center */ -.monaco-workbench .part.titlebar .command-center .agent-status-pill { - border-color: var(--vscode-input-border); -} - -.monaco-workbench .part.titlebar .command-center .agent-status-badge { - border-color: var(--vscode-input-border); -} - -.monaco-workbench.vs-dark .monaco-action-bar:not(.vertical) .agent-status-badge-section.sparkle .action-container:hover, -.monaco-workbench.vs-dark .monaco-action-bar:not(.vertical) .agent-status-badge-section.sparkle .dropdown-action-container:hover - { - background-color: var(--vscode-toolbar-hoverBackground); -} - -.monaco-workbench.vs-dark .monaco-action-bar:not(.vertical) .agent-status-badge .monaco-dropdown-with-primary:not(.disabled):hover { - background-color: var(--vscode-commandCenter-activeBackground); -} - -.monaco-workbench .unified-quick-access-tabs { - background: transparent; -} - -/* Quick Input List - use descriptionForeground color for descriptions */ -.monaco-workbench .quick-input-list .monaco-icon-label .label-description { - opacity: 1; - color: var(--vscode-descriptionForeground); -} diff --git a/src/vs/base/browser/ui/inputbox/inputBox.css b/src/vs/base/browser/ui/inputbox/inputBox.css index 827a19f29b4..dc5e637f6ee 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.css +++ b/src/vs/base/browser/ui/inputbox/inputBox.css @@ -103,4 +103,5 @@ background-repeat: no-repeat; width: 16px; height: 16px; + color: var(--vscode-icon-foreground); } diff --git a/src/vs/editor/browser/viewParts/minimap/minimap.css b/src/vs/editor/browser/viewParts/minimap/minimap.css index 73814f23979..e6ced7d3dc8 100644 --- a/src/vs/editor/browser/viewParts/minimap/minimap.css +++ b/src/vs/editor/browser/viewParts/minimap/minimap.css @@ -61,3 +61,7 @@ .monaco-editor .minimap { z-index: 5; } + +.monaco-editor .minimap canvas { + opacity: 0.9; +} diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css index e0309cff01e..01010edd2af 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebook.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebook.css @@ -385,9 +385,9 @@ .notebookOverlay .monaco-list-row .cell-title-toolbar { border-radius: var(--vscode-cornerRadius-medium); box-shadow: var(--vscode-shadow-sm); + background-color: var(--vscode-editorWidget-background); } -.notebookOverlay .monaco-list-row .cell-title-toolbar, .notebookOverlay .monaco-list-row.cell-drag-image, .notebookOverlay .cell-bottom-toolbar-container .action-item, .notebookOverlay .cell-list-top-cell-toolbar-container .action-item { From b2fcfb568f8b9877b1d5c67d1832f03eaa12edf8 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Wed, 4 Mar 2026 15:59:55 +0000 Subject: [PATCH 2/4] update: remove contrastBorder and use editorWidget-border for chat overlay styles --- extensions/theme-2026/themes/2026-dark.json | 1 - extensions/theme-2026/themes/2026-light.json | 1 - .../chat/browser/chatEditing/media/chatEditingEditorOverlay.css | 2 +- .../chat/browser/chatEditing/media/chatEditorController.css | 2 +- 4 files changed, 2 insertions(+), 4 deletions(-) diff --git a/extensions/theme-2026/themes/2026-dark.json b/extensions/theme-2026/themes/2026-dark.json index 26e6241d748..06cafb2e978 100644 --- a/extensions/theme-2026/themes/2026-dark.json +++ b/extensions/theme-2026/themes/2026-dark.json @@ -10,7 +10,6 @@ "descriptionForeground": "#8C8C8C", "icon.foreground": "#8C8C8C", "focusBorder": "#3994BCB3", - "contrastBorder": "#333536", "textBlockQuote.background": "#242526", "textBlockQuote.border": "#2A2B2CFF", "textCodeBlock.background": "#242526", diff --git a/extensions/theme-2026/themes/2026-light.json b/extensions/theme-2026/themes/2026-light.json index df59066c02a..1818a2c066d 100644 --- a/extensions/theme-2026/themes/2026-light.json +++ b/extensions/theme-2026/themes/2026-light.json @@ -10,7 +10,6 @@ "descriptionForeground": "#606060", "icon.foreground": "#606060", "focusBorder": "#0069CCFF", - "contrastBorder": "#F0F1F2FF", "textBlockQuote.background": "#EAEAEA", "textBlockQuote.border": "#F0F1F2FF", "textCodeBlock.background": "#EAEAEA", diff --git a/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditingEditorOverlay.css b/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditingEditorOverlay.css index 0c26b35ff49..fc44d44f42f 100644 --- a/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditingEditorOverlay.css +++ b/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditingEditorOverlay.css @@ -8,7 +8,7 @@ color: var(--vscode-foreground); background-color: var(--vscode-editorWidget-background); border-radius: 6px; - border: 1px solid var(--vscode-contrastBorder); + border: 1px solid var(--vscode-editorWidget-border); display: flex; align-items: center; justify-content: center; diff --git a/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditorController.css b/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditorController.css index e24c87525bf..5e5b64f1fcd 100644 --- a/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditorController.css +++ b/src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditorController.css @@ -21,7 +21,7 @@ border-radius: 6px; background-color: var(--vscode-editorWidget-background); color: var(--vscode-foreground); - border: 1px solid var(--vscode-contrastBorder); + border: 1px solid var(--vscode-editorWidget-border); overflow: hidden; } From 43b50946c60517eb8418fa8a4d64637141ca93f5 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Wed, 4 Mar 2026 16:07:16 +0000 Subject: [PATCH 3/4] update: adjust tab border styles for improved theme consistency --- extensions/theme-2026/themes/2026-dark.json | 4 ++-- extensions/theme-2026/themes/2026-light.json | 4 ++-- extensions/theme-2026/themes/styles.css | 9 --------- 3 files changed, 4 insertions(+), 13 deletions(-) diff --git a/extensions/theme-2026/themes/2026-dark.json b/extensions/theme-2026/themes/2026-dark.json index 06cafb2e978..d5655d068ef 100644 --- a/extensions/theme-2026/themes/2026-dark.json +++ b/extensions/theme-2026/themes/2026-dark.json @@ -190,7 +190,6 @@ "tab.inactiveForeground": "#8C8C8C", "tab.border": "#2A2B2CFF", "tab.lastPinnedBorder": "#2A2B2CFF", - "tab.activeBorder": "#121314", "tab.activeBorderTop": "#3994BC", "tab.hoverBackground": "#262728", "tab.hoverForeground": "#bfbfbf", @@ -199,7 +198,8 @@ "tab.unfocusedInactiveBackground": "#191A1B", "tab.unfocusedInactiveForeground": "#444444", "editorGroupHeader.tabsBackground": "#191A1B", - "editorGroupHeader.tabsBorder": "#2A2B2CFF", + "tab.activeBorder": "#00000000", + "editorGroupHeader.tabsBorder": "#00000000", "breadcrumb.foreground": "#8C8C8C", "breadcrumb.background": "#121314", "breadcrumb.focusForeground": "#bfbfbf", diff --git a/extensions/theme-2026/themes/2026-light.json b/extensions/theme-2026/themes/2026-light.json index 1818a2c066d..e9db9b37656 100644 --- a/extensions/theme-2026/themes/2026-light.json +++ b/extensions/theme-2026/themes/2026-light.json @@ -195,7 +195,6 @@ "tab.inactiveForeground": "#606060", "tab.border": "#F0F1F2FF", "tab.lastPinnedBorder": "#F0F1F2FF", - "tab.activeBorder": "#FAFAFD", "tab.activeBorderTop": "#000000", "tab.hoverBackground": "#DADADA4f", "tab.hoverForeground": "#202020", @@ -204,7 +203,8 @@ "tab.unfocusedInactiveBackground": "#FAFAFD", "tab.unfocusedInactiveForeground": "#BBBBBB", "editorGroupHeader.tabsBackground": "#FAFAFD", - "editorGroupHeader.tabsBorder": "#F0F1F2FF", + "tab.activeBorder": "#00000000", + "editorGroupHeader.tabsBorder": "#00000000", "breadcrumb.foreground": "#606060", "breadcrumb.background": "#FFFFFF", "breadcrumb.focusForeground": "#202020", diff --git a/extensions/theme-2026/themes/styles.css b/extensions/theme-2026/themes/styles.css index 924b770a19f..be78cde2241 100644 --- a/extensions/theme-2026/themes/styles.css +++ b/extensions/theme-2026/themes/styles.css @@ -3,15 +3,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -/* Tab border bottom - make transparent */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container { - --tabs-border-bottom-color: transparent !important; -} - -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab { - --tab-border-bottom-color: transparent !important; -} - /* Quick Input (Command Palette) */ .monaco-workbench .quick-input-list .quick-input-list-entry .quick-input-list-separator { From defff987fafbff3d3bfece398496196f3baab4d4 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Wed, 4 Mar 2026 17:02:26 +0000 Subject: [PATCH 4/4] update: remove unused CSS file and clean up theme-related styles for better maintainability Co-authored-by: Copilot --- extensions/theme-2026/package.json | 10 +---- extensions/theme-2026/themes/styles.css | 37 ------------------- .../quickinput/browser/media/quickInput.css | 2 + .../browser/media/settingsEditor2.css | 1 + .../preferences/browser/settingsEditor2.ts | 5 +-- 5 files changed, 5 insertions(+), 50 deletions(-) delete mode 100644 extensions/theme-2026/themes/styles.css diff --git a/extensions/theme-2026/package.json b/extensions/theme-2026/package.json index 305cc066c89..8360afdac5c 100644 --- a/extensions/theme-2026/package.json +++ b/extensions/theme-2026/package.json @@ -8,9 +8,6 @@ "engines": { "vscode": "^1.85.0" }, - "enabledApiProposals": [ - "css" - ], "categories": [ "Themes" ], @@ -28,11 +25,6 @@ "uiTheme": "vs-dark", "path": "./themes/2026-dark.json" } - ], - "css": [ - { - "path": "./themes/styles.css" - } - ] + ] } } diff --git a/extensions/theme-2026/themes/styles.css b/extensions/theme-2026/themes/styles.css deleted file mode 100644 index be78cde2241..00000000000 --- a/extensions/theme-2026/themes/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ - -/* Quick Input (Command Palette) */ - -.monaco-workbench .quick-input-list .quick-input-list-entry .quick-input-list-separator { - height: 16px; - margin-top: 2px; - display: flex; - align-items: center; - font-size: 11px; - padding: 0 4px; - border-radius: var(--vscode-cornerRadius-small) !important; - background: transparent !important; - color: var(--vscode-descriptionForeground) !important; - border: 1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 50%, transparent) !important; - margin-right: 8px; -} - -.monaco-workbench .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator, -.monaco-workbench .monaco-list-row.selected .quick-input-list-entry .quick-input-list-separator, -.monaco-workbench .monaco-list-row:hover .quick-input-list-entry .quick-input-list-separator { - background: transparent !important; - color: inherit !important; - border: none !important; - padding: 0; -} - -/* Settings */ -.monaco-workbench .settings-editor > .settings-header > .search-container > .search-container-widgets > .settings-count-widget { - border-radius: var(--radius-sm); - background: transparent !important; - color: var(--vscode-descriptionForeground) !important; - border: 1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 50%, transparent) !important; -} diff --git a/src/vs/platform/quickinput/browser/media/quickInput.css b/src/vs/platform/quickinput/browser/media/quickInput.css index 01831b024b9..aa48f0b90f2 100644 --- a/src/vs/platform/quickinput/browser/media/quickInput.css +++ b/src/vs/platform/quickinput/browser/media/quickInput.css @@ -308,6 +308,8 @@ .quick-input-list .quick-input-list-entry .quick-input-list-separator { margin-right: 4px; + font-size: var(--vscode-bodyFontSize-xSmall); + color: var(--vscode-descriptionForeground); /* separate from keybindings or actions */ } diff --git a/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css index e8ab65c8a5a..b88b3073a9d 100644 --- a/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css @@ -62,6 +62,7 @@ .settings-editor > .settings-header > .search-container > .search-container-widgets > .settings-count-widget { margin-right: 3px; padding-bottom: 3px; + color: var(--vscode-descriptionForeground); } .settings-editor > .settings-header > .search-container > .search-container-widgets > .settings-count-widget:empty { diff --git a/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts b/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts index 19d87307110..76b4bbb9c16 100644 --- a/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts @@ -44,7 +44,7 @@ import { Registry } from '../../../../platform/registry/common/platform.js'; import { IStorageService, StorageScope, StorageTarget } from '../../../../platform/storage/common/storage.js'; import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js'; import { defaultButtonStyles, defaultToggleStyles } from '../../../../platform/theme/browser/defaultStyles.js'; -import { asCssVariable, asCssVariableWithDefault, badgeBackground, badgeForeground, contrastBorder, editorForeground, inputBackground } from '../../../../platform/theme/common/colorRegistry.js'; +import { asCssVariable, editorForeground } from '../../../../platform/theme/common/colorRegistry.js'; import { IThemeService } from '../../../../platform/theme/common/themeService.js'; import { IUserDataSyncEnablementService, IUserDataSyncService, SyncStatus } from '../../../../platform/userDataSync/common/userDataSync.js'; import { IWorkspaceTrustManagementService } from '../../../../platform/workspace/common/workspaceTrust.js'; @@ -801,9 +801,6 @@ export class SettingsEditor2 extends EditorPane { this.controlsElement = DOM.append(this.searchContainer, DOM.$('.search-container-widgets')); this.countElement = DOM.append(this.controlsElement, DOM.$('.settings-count-widget.monaco-count-badge.long')); - this.countElement.style.backgroundColor = asCssVariable(badgeBackground); - this.countElement.style.color = asCssVariable(badgeForeground); - this.countElement.style.border = `1px solid ${asCssVariableWithDefault(contrastBorder, asCssVariable(inputBackground))}`; this.searchInputActionBar = this._register(new ActionBar(this.controlsElement, { actionViewItemProvider: (action, options) => {