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

Merge pull request #294934 from microsoft/mrleemurray/lively-amethyst-rooster

Browse Source 
Refactor theme styles for buttons and quick input widgets
This commit is contained in:
Lee Murray
2026-02-13 17:50:26 +00:00
committed by GitHub
parent d2f1885c82 61ce2a354b
commit 2e0ae5f4f1
2 changed files with 18 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,10 +20,10 @@
"button.background": "#0069CC",
"button.foreground": "#FFFFFF",
"button.hoverBackground": "#0063C1",
"button.border": "#F2F3F4FF",
"button.border": "#EEEEF1",
"button.secondaryBackground": "#EDEDED",
"button.secondaryForeground": "#202020",
"button.secondaryHoverBackground": "#F3F3F3",
"button.secondaryHoverBackground": "#EEEEEE",
"checkbox.background": "#EDEDED",
"checkbox.border": "#D8D8D8",
"checkbox.foreground": "#202020",
@@ -64,7 +64,7 @@
"list.activeSelectionForeground": "#202020",
"list.inactiveSelectionBackground": "#E0E0E0",
"list.inactiveSelectionForeground": "#202020",
"list.hoverBackground": "#F3F3F3",
"list.hoverBackground": "#EEEEEE",
"list.hoverForeground": "#202020",
"list.dropBackground": "#0069CC15",
"list.focusBackground": "#0069CC1A",
@@ -101,12 +101,12 @@
"menu.foreground": "#202020",
"menu.selectionBackground": "#0069CC1A",
"menu.selectionForeground": "#202020",
"menu.separatorBackground": "#F7F7F7",
"menu.separatorBackground": "#EEEEF1",
"menu.border": "#F2F3F4FF",
"commandCenter.foreground": "#202020",
"commandCenter.activeForeground": "#202020",
"commandCenter.background": "#FAFAFD",
"commandCenter.activeBackground": "#F3F3F3",
"commandCenter.activeBackground": "#EEEEEE",
"commandCenter.border": "#D8D8D8",
"editor.background": "#FFFFFF",
"editor.foreground": "#202020",
@@ -127,7 +127,7 @@
"editorLink.activeForeground": "#0069CC",
"editorWhitespace.foreground": "#66666640",
"editorIndentGuide.background": "#F7F7F740",
"editorIndentGuide.activeBackground": "#F3F3F3",
"editorIndentGuide.activeBackground": "#EEEEEE",
"editorRuler.foreground": "#F7F7F7",
"editorCodeLens.foreground": "#666666",
"editorBracketMatch.background": "#0069CC40",
@@ -179,8 +179,8 @@
"statusBar.debuggingForeground": "#FFFFFF",
"statusBar.noFolderBackground": "#F0F0F3",
"statusBar.noFolderForeground": "#666666",
"statusBarItem.activeBackground": "#F3F3F3",
"statusBarItem.hoverBackground": "#F3F3F3",
"statusBarItem.activeBackground": "#EEEEEE",
"statusBarItem.hoverBackground": "#EEEEEE",
"statusBarItem.focusBorder": "#0069CCFF",
"statusBarItem.prominentBackground": "#0069CCDD",
"statusBarItem.prominentForeground": "#FFFFFF",
@@ -193,7 +193,7 @@
"tab.lastPinnedBorder": "#F2F3F4FF",
"tab.activeBorder": "#FAFAFD",
"tab.activeBorderTop": "#000000",
"tab.hoverBackground": "#F3F3F3",
"tab.hoverBackground": "#EEEEEE",
"tab.hoverForeground": "#202020",
"tab.unfocusedActiveBackground": "#FAFAFD",
"tab.unfocusedActiveForeground": "#666666",
@@ -224,7 +224,7 @@
"extensionButton.prominentBackground": "#0069CC",
"extensionButton.prominentForeground": "#FFFFFF",
"extensionButton.prominentHoverBackground": "#0064CC",
"pickerGroup.border": "#F2F3F4FF",
"pickerGroup.border": "#EEEEF1",
"pickerGroup.foreground": "#202020",
"quickInput.background": "#F0F0F3",
"quickInput.foreground": "#202020",

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

@@ -7,28 +7,22 @@
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
/* --radius-lg: 12px; */
--shadow-xs: 0 0 2px rgba(0, 0, 0, 0.06);
--shadow-sm: 0 0 4px rgba(0, 0, 0, 0.08);
--shadow-md: 0 0 6px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 0 12px rgba(0, 0, 0, 0.14);
--shadow-xl: 0 0 20px rgba(0, 0, 0, 0.15);
--shadow-2xl: 0 0 20px rgba(0, 0, 0, 0.18);
--shadow-hover: 0 0 8px rgba(0, 0, 0, 0.12);
--shadow-sm-strong: 0 0 4px rgba(0, 0, 0, 0.18);
--shadow-button-active: inset 0 1px 2px rgba(0, 0, 0, 0.1);
--shadow-inset-white: inset 0 0 4px rgba(255, 255, 255, 0.1);
--shadow-active-tab: 0 8px 12px rgba(0, 0, 0, 0.02);
--backdrop-blur-sm: blur(12px);
--backdrop-blur-md: blur(20px) saturate(180%);
--backdrop-blur-lg: blur(40px) saturate(180%);
}
/* Dark theme: add brightness reduction for contrast-safe luminosity blending over bright backgrounds */
.monaco-workbench.vs-dark {
--backdrop-blur-sm: blur(12px) brightness(0.55);
--backdrop-blur-md: blur(20px) saturate(180%) brightness(0.55);
--backdrop-blur-lg: blur(40px) saturate(180%) brightness(0.55);
}
@@ -131,7 +125,6 @@
.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;
@@ -194,7 +187,7 @@
.monaco-workbench .quick-input-widget .quick-input-action,
.monaco-workbench .quick-input-widget .quick-input-message,
.monaco-workbench .quick-input-widget .monaco-list,
.monaco-workbench .quick-input-widget .monaco-list-row {
.monaco-workbench .quick-input-widget .monaco-list-row:not(:has(.quick-input-list-separator-border)) {
border-color: transparent !important;
outline: none !important;
}
@@ -211,6 +204,10 @@
border-radius: var(--radius-lg);
}
.monaco-workbench .quick-input-widget .monaco-list-rows {
background: transparent !important;
}
.monaco-workbench .quick-input-widget .monaco-inputbox {
box-shadow: none !important;
background: transparent !important;
@@ -347,7 +344,7 @@
/* Dialog */
.monaco-workbench .monaco-dialog-box {
box-shadow: var(--shadow-2xl);
box-shadow: var(--shadow-xl);
border-radius: var(--radius-lg);
backdrop-filter: var(--backdrop-blur-lg);
-webkit-backdrop-filter: var(--backdrop-blur-lg);
@@ -362,8 +359,8 @@
.monaco-workbench .monaco-editor .peekview-widget {
box-shadow: var(--shadow-hover);
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);
backdrop-filter: var(--backdrop-blur-md);
-webkit-backdrop-filter: var(--backdrop-blur-md);
}
.monaco-workbench.vs-dark .monaco-editor .peekview-widget {
@@ -475,13 +472,6 @@
}
/* Buttons */
.monaco-workbench .monaco-button {
box-shadow: var(--shadow-xs);
}
.monaco-workbench .monaco-button:hover {
box-shadow: var(--shadow-sm);
}
.monaco-workbench .monaco-button:active {
box-shadow: var(--shadow-button-active);
@@ -516,11 +506,6 @@
border-radius: var(--radius-lg);
}
/* Terminal */
.monaco-workbench.vs .pane-body.integrated-terminal {
box-shadow: var(--shadow-inset-white);
}
/* SCM */
.monaco-workbench .scm-view .scm-provider {
box-shadow: var(--shadow-sm);
@@ -681,10 +666,6 @@
background: transparent;
}
.monaco-workbench .quick-input-list .quick-input-list-entry.quick-input-list-separator-border {
border-top-width: 0;
}
/* Quick Input List - use descriptionForeground color for descriptions */
.monaco-workbench .quick-input-list .monaco-icon-label .label-description {
opacity: 1;