Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-04 15:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

theme - update color values for command center and editor widgets in dark and light themes

Browse Source
This commit is contained in:
mrleemurray
2026-02-05 12:40:17 +00:00
parent bf79fb66ac
commit e80df14308
3 changed files with 57 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extensions/theme-2026/themes/styles.css
+37 -12
View File
@@ -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 {