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

Enhance 2026 theme: update editor sticky scroll background and adjust light theme tab and breadcrumb colors

Browse Source
This commit is contained in:
mrleemurray
2026-02-10 15:09:22 +00:00
parent e60eb8c3b1
commit 02c85ea7ba
3 changed files with 21 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
extensions/theme-2026/themes/2026-dark.json
View File

@@ -102,6 +102,7 @@
"commandCenter.border": "#2E3031",
"editor.background": "#121314",
"editor.foreground": "#BBBEBF",
"editorStickyScroll.background": "#121314",
"editorLineNumber.foreground": "#858889",
"editorLineNumber.activeForeground": "#BBBEBF",
"editorCursor.foreground": "#BBBEBF",

4
extensions/theme-2026/themes/2026-light.json
View File

@@ -185,7 +185,7 @@
"statusBarItem.prominentBackground": "#0069CCDD",
"statusBarItem.prominentForeground": "#FFFFFF",
"statusBarItem.prominentHoverBackground": "#0069CC",
"tab.activeBackground": "#FAFAFD",
"tab.activeBackground": "#FFFFFF",
"tab.activeForeground": "#202020",
"tab.inactiveBackground": "#FAFAFD",
"tab.inactiveForeground": "#666666",
@@ -202,7 +202,7 @@
"editorGroupHeader.tabsBackground": "#FAFAFD",
"editorGroupHeader.tabsBorder": "#F2F3F4FF",
"breadcrumb.foreground": "#666666",
"breadcrumb.background": "#FAFAFD",
"breadcrumb.background": "#FFFFFF",
"breadcrumb.focusForeground": "#202020",
"breadcrumb.activeSelectionForeground": "#202020",
"breadcrumbPicker.background": "#F0F0F3",

54
extensions/theme-2026/themes/styles.css
View File

@@ -131,15 +131,11 @@
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
box-shadow: inset var(--shadow-active-tab);
/* background: var(--vs) */
position: relative;
z-index: 5;
border-radius: 0;
border-top: none !important;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--vscode-focusBorder) 10%, transparent) 0%,
transparent 100%
), var(--vscode-tab-activeBackground) !important;
}
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover:not(.active) {
@@ -437,6 +433,10 @@
background: color-mix(in srgb, var(--vscode-breadcrumbPicker-background) 60%, transparent) !important;
}
.monaco-workbench.vs .breadcrumbs-control {
border-bottom: 1px solid var(--vscode-editorWidget-border);
}
/* Input Boxes */
.monaco-workbench .monaco-inputbox,
.monaco-workbench .suggest-input-container {
@@ -569,10 +569,14 @@
/* Sticky Scroll */
.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) 60%, transparent) !important;
backdrop-filter: var(--backdrop-blur-lg) !important;
-webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
border-bottom: var(--vscode-editorWidget-border) !important;
background: transparent !important;
backdrop-filter: var(--backdrop-blur-md) !important;
-webkit-backdrop-filter: var(--backdrop-blur-md) !important;
}
.monaco-workbench .monaco-editor .sticky-widget > * {
background: transparent !important;
}
.monaco-workbench.vs-dark .monaco-editor .sticky-widget {
@@ -580,31 +584,9 @@
}
.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-lines {
background-color: transparent !important;
background: transparent !important;
}
.monaco-workbench.vs-dark .monaco-editor .sticky-widget,
.monaco-workbench .monaco-editor .sticky-widget-focus-preview,
.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) 60%, transparent) !important;
backdrop-filter: var(--backdrop-blur-lg) !important;
-webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
box-shadow: var(--shadow-hover) !important;
}
.monaco-editor .sticky-widget .sticky-line-content,
.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) 60%, transparent);
}
.monaco-workbench.vs-dark .monaco-editor .sticky-widget .sticky-line-content,
.monaco-workbench.vs-dark .monaco-editor .sticky-widget .sticky-line-number {
background-color: color-mix(in srgb, var(--vscode-editor-background) 30%, transparent);
background: color-mix(in srgb, var(--vscode-editor-background) 40%, transparent) !important;
backdrop-filter: var(--backdrop-blur-md) !important;
-webkit-backdrop-filter: var(--backdrop-blur-md) !important;
}
.monaco-editor .rename-box.preview {
@@ -616,9 +598,9 @@
/* Notebook */
/* .monaco-workbench .notebookOverlay.notebook-editor {
.monaco-workbench .notebookOverlay.notebook-editor {
z-index: 35 !important;
} */
}
.monaco-workbench .notebookOverlay .monaco-list-row .cell-editor-part:before {
box-shadow: inset var(--shadow-sm);