diff --git a/extensions/theme-2026/themes/styles.css b/extensions/theme-2026/themes/styles.css index 14e1bb6cb10..17685dec3b8 100644 --- a/extensions/theme-2026/themes/styles.css +++ b/extensions/theme-2026/themes/styles.css @@ -287,11 +287,17 @@ box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-lg); + 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); } .monaco-workbench .monaco-menu-container > .monaco-scrollable-element { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !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); } .monaco-workbench .action-widget { diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts index c747ea1cd87..bd6298d0485 100644 --- a/src/vs/base/browser/ui/menu/menu.ts +++ b/src/vs/base/browser/ui/menu/menu.ts @@ -321,7 +321,7 @@ export class Menu extends ActionBar { const fgColor = style.foregroundColor ?? ''; const bgColor = style.backgroundColor ?? ''; const border = style.borderColor ? `1px solid ${style.borderColor}` : ''; - const borderRadius = '5px'; + const borderRadius = 'var(--vscode-cornerRadius-large)'; const shadow = style.shadowColor ? `0 2px 8px ${style.shadowColor}` : ''; scrollElement.style.outline = border; @@ -1022,7 +1022,7 @@ export function getMenuWidgetCSS(style: IMenuStyles, isForShadowDom: boolean): s let result = /* css */` .monaco-menu { font-size: 13px; - border-radius: 5px; + border-radius: var(--vscode-cornerRadius-large); min-width: 160px; } @@ -1137,11 +1137,11 @@ ${formatRule(Codicon.menuSubmenu)} .monaco-menu .monaco-action-bar.vertical .action-menu-item { flex: 1 1 auto; display: flex; - height: 2em; + height: 24px; align-items: center; position: relative; margin: 0 4px; - border-radius: 4px; + border-radius: var(--vscode-cornerRadius-medium); } .monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .keybinding, @@ -1270,7 +1270,7 @@ ${formatRule(Codicon.menuSubmenu)} } .monaco-menu .monaco-action-bar.vertical .action-menu-item { - height: 2em; + height: 24px; } .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator), diff --git a/src/vs/platform/theme/browser/defaultStyles.ts b/src/vs/platform/theme/browser/defaultStyles.ts index 49e08fbf8da..dc1b16855e2 100644 --- a/src/vs/platform/theme/browser/defaultStyles.ts +++ b/src/vs/platform/theme/browser/defaultStyles.ts @@ -244,8 +244,8 @@ export const defaultMenuStyles: IMenuStyles = { borderColor: asCssVariable(menuBorder), foregroundColor: asCssVariable(menuForeground), backgroundColor: asCssVariable(menuBackground), - selectionForegroundColor: asCssVariable(menuSelectionForeground), - selectionBackgroundColor: asCssVariable(menuSelectionBackground), + selectionForegroundColor: asCssVariable(listHoverForeground), + selectionBackgroundColor: asCssVariable(listHoverBackground), selectionBorderColor: asCssVariable(menuSelectionBorder), separatorColor: asCssVariable(menuSeparatorBackground), scrollbarShadow: asCssVariable(scrollbarShadow),