vscode 酷炫毛玻璃效果 (超详细)

vscode.jpeg

今天在网上看到 vscode 酷炫毛玻璃的效果，说白了就是添加透明度了，好奇心又让我想尝试一把。好吧。我承认净整些花里胡哨的！

温馨提示，仅限于 macOS 系统 !

第一步，下载必要插件 "Custom CSS and JS Loader"

1️⃣ 点击 vscode 窗口最左边的正方形插件图标 或者 shift + commond + p 搜索 install Extensions 回车即可

2️⃣ 搜索 Custom CSS and JS Loader 下载即可

第二步，创建 CSS 和 JS 文件

1️⃣ 在你的电脑上创建 custom.css 和 custom.js 两个文件（建议是创建在几乎不会动这个两个文件的地方）
2️⃣ 将以下代码分别拷贝到对应的 custom.css 和 custom.js 文件中，保存即可。

• custom.css

  html {
    background: transparent !important;
  }

  .scroll-decoration {
    box-shadow: none !important;
  }

  .minimap {
    opacity: 0.6;
  }

  .editor-container {
    background: transparent !important;
  }

  .search-view .search-widget .input-box, .search-view .search-widget .input-box .monaco-inputbox,
  .monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab,
  .monaco-editor-background,
  .monaco-editor .margin,
  .monaco-workbench>.part>.content,
  .monaco-workbench>.editor>.content>.one-editor-silo.editor-one,
  .monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title,
  .monaco-workbench>.part>.title,
  .monaco-workbench,
  .monaco-workbench>.part,
  body {
    background: transparent !important;
  }

  .editor-group-container>.tabs {
    background-color: rgba(37, 37, 37,0.2) !important;
  }

  .editor-group-container>.tabs .tab {
    background-color: transparent !important;
  }

  .editor-group-container>.tabs .tab.active {
    background-color: rgba(37, 37, 37,0.4) !important;
  }

  .monaco-list.settings-toc-tree .monaco-list-row.focused {
    outline-color: rgb(37, 37, 37,0.6) !important;
  }

  .monaco-list.settings-toc-tree .monaco-list-row.selected,
  .monaco-list.settings-toc-tree .monaco-list-row.focused,
  .monaco-list .monaco-list-row.selected,
  .monaco-list.settings-toc-tree:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
    background-color: rgb(37, 37, 37,0.6) !important;
  }

  .monaco-list.settings-editor-tree .monaco-list-row {
    background-color: transparent !important;
    outline-color: transparent !important;
  }

  .monaco-inputbox {
    background-color: rgba(41, 41, 41,0.2) !important;
  }

  .monaco-editor .selected-text {
    background-color: rgba(58, 61, 65,0.6) !important;
  }

  .monaco-editor .focused .selected-text {
    background-color: rgba(38, 79, 120,0.6) !important;
  }

  .monaco-editor .view-overlays .current-line {
    border-color: rgba(41, 41, 41,0.2) !important;
  }

  .extension-editor,
  .monaco-inputbox>.wrapper>.input,
  .monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active,
  .preferences-editor>.preferences-header,
  .preferences-editor>.preferences-editors-container.side-by-side-preferences-editor .preferences-header-container,
  .monaco-editor, .monaco-editor .inputarea.ime-input {
    background: transparent !important;
  }

  .editor-group-container>.tabs .tab {
    border: none !important;
  }

• custom.js

  nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');

第三步，将下列配置添加到 setting.json

1️⃣ code - 首选项 - Settings
2️⃣ 将以下代码 copy 到 setting.json 中
3️⃣ 正如你所见的配置了 custom.* 的两个文件的路径, 问题来了，有的小伙伴不知道自己的文件路径具体是什么？给你一个小tips，打开 chrome 浏览器，然后将文件拖入到浏览器中，对应的路径拷贝下来即可。

  "vscode_custom_css.imports": [
    "file:///Users/MyUserName/Documents/custom.css",
    "file:///Users/MyUserName/Documents/custom.js"
  ],
  "vscode_custom_css.policy": true

第四步，执行命令 Reload Custom CSS and JS

1️⃣ shift + commond + p
2️⃣ 搜索 Reload Custom CSS and JS 回车

第五步, 重新启动 vscode

image.png

大功告成 ！！！

Reference

https://github.com/Microsoft/vscode/issues/32257#issuecomment-489474744