css 毛玻璃_给 vscode 添加半透明毛玻璃效果

本文原文发布于我的博客 https://eyhn.in 后续进展请看：使用插件一键启用 Visual Studio Code 的毛玻璃效果

Electron 可以调用 MacOS 的毛玻璃效果，下面让我来带你给 VScode 添加毛玻璃效果。

1. 安装 “Custom CSS and JS Loader” 插件

2. 创建一个 CSS 文件（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;
}

3. 创建一个 JS 文件

nodeRequire('electron')
  .remote
  .getCurrentWindow()
  // 设置半透明效果  https://electronjs.org/docs/api/browser-window#winsetvibrancytype-macos 
  .setVibrancy('ultra-dark');

4. 修改 settings.json 添加以下内容

"vscode_custom_css.imports": [   
  "file:///<CSS文件路径>/custom.css",
  "file:///<JS文件路径>/custom.js"
], 
"vscode_custom_css.policy": true

5. 输入命令（⇧⌘P） “Reload Custom CSS and JS”

6. 重启 VScode

之后每次更新 VScode 后需要输入命令 “Reload Custom CSS and JS”。

相关 issues 讨论：#32257 #52707 #65215