如何在VSCode中实现按住Ctrl键降低自动建议弹窗透明度的效果

我在Visual Studio里日常高频使用却常常未刻意留意的一项功能是：当我按住CTRL按键时，弹出层的透明度会自动降低，让我能够清晰看到原本被弹出层遮挡住的代码。

下图为按住并保持按下CTRL按键时的弹窗状态

请问是否有方法在Visual Studio Code中实现完全一致的效果？可以是软件自带的内置功能，也可以是借助第三方扩展实现。

实现说明 #

VSCode原生无内置该功能，可通过以下两种方式实现：

• 方式一：自定义样式配置（可自由调整透明度）
  1. 安装扩展 Custom CSS and JS Loader
  2. 在本地新建两个文件：vscode-custom.css、vscode-custom.js
  3. 往vscode-custom.js中写入以下代码，用于监听CTRL按键的按下/抬起状态：

  // 按下CTRL时给body添加标记类
  document.addEventListener('keydown', (e) => {
    if (e.ctrlKey) document.body.classList.add('ctrl-pressed');
  });
  // 松开CTRL时移除标记类
  document.addEventListener('keyup', (e) => {
    if (!e.ctrlKey) document.body.classList.remove('ctrl-pressed');
  });
  // 窗口失焦时自动清除标记，避免透明度卡住
  window.addEventListener('blur', () => document.body.classList.remove('ctrl-pressed'));
  

  4. 往vscode-custom.css中写入以下样式，控制弹窗透明效果：

  /* 可修改opacity的数值调整透明程度，数值越低透明度越高 */
  body.ctrl-pressed .monaco-editor-hover,
  body.ctrl-pressed .suggest-widget,
  body.ctrl-pressed .parameter-hints-widget,
  body.ctrl-pressed .quick-input-widget {
    opacity: 0.25 !important;
    transition: opacity 0.1s linear;
  }
  

  5. 打开VSCode的settings.json配置文件，添加以下配置项，替换为你本地两个文件的实际路径：

  "vscode_custom_css.imports": [
    "file:///你的本地路径/vscode-custom.css",
    "file:///你的本地路径/vscode-custom.js"
  ]
  

  6. 按Ctrl+Shift+P打开命令面板，执行Reload Custom CSS and JS，重启VSCode后即可生效。
     注意：首次执行重载命令时，会弹出扩展权限提示，按指引确认允许修改文件即可。
• 方式二：现成扩展实现
  不想手动配置代码的话，可在VSCode扩展市场搜索关键词「Ctrl Hold Transparent Popup」、「Hover Opacity Toggle」，找到对应功能的扩展，这类扩展大多默认实现按住CTRL切换弹窗透明度的效果，部分支持自定义透明度数值。

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