VSCode右键菜单一、二级菜单类名查询及毛玻璃样式定制需求

捕获菜单类名的方法 #

右键菜单点击后会自动隐藏，直接用开发者工具无法选中，可通过以下步骤捕获元素：

• 按Ctrl+Shift+I（Windows/Linux）或Cmd+Opt+I（Mac）打开VSCode开发者工具
• 切换到「Elements」标签，点击左上角的选择元素按钮（箭头图标），然后按F8暂停脚本执行
• 右键打开目标菜单，回到开发者工具即可选中菜单元素，查看其类名

常见菜单类名及配置示例 #

VSCode的右键菜单（含一级、二级）核心类名如下：

• 外层容器：.monaco-menu-container
• 菜单内容区域：.monaco-menu
• 二级子菜单会嵌套在父菜单中，可通过.monaco-menu .monaco-menu或单独的.monaco-menu-container定位

结合apc扩展实现毛玻璃效果的配置：

"workbench.colorCustomizations": {
  "menu.background": "#00000000" // 先把默认菜单背景设为透明
},
"apc.stylesheet": {
  // 所有菜单外层容器设为透明
  ".monaco-menu-container": "background: transparent !important;",
  // 菜单内容区域添加毛玻璃和半透明背景
  ".monaco-menu": "background: rgba(15, 15, 15, 0.3) !important; backdrop-filter: blur(8px); border-radius: 6px;"
}

如果二级菜单样式未生效，可尝试更精确的选择器：

"apc.stylesheet": {
  ".monaco-menu-container": "background: transparent !important;",
  ".monaco-menu": "background: rgba(15, 15, 15, 0.3) !important; backdrop-filter: blur(8px);",
  // 单独针对二级子菜单
  ".monaco-menu-submenu .monaco-menu": "background: rgba(15, 15, 15, 0.35) !important; backdrop-filter: blur(8px);"
}

注意：添加!important是为了覆盖VSCode默认样式优先级，确保自定义样式生效。

内容的提问来源于stack exchange，提问作者Storm Lee