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 文件
w = nodeRequire('electron') .remote .getCurrentWindow(); w.setBackgroundColor('#00000000'); // 设置半透明效果 https://electronjs.org/docs/api/browser-window#winsetvibrancytype-macos w.setVibrancy('ultra-dark'); // hack https://github.com/microsoft/vscode/issues/32257#issuecomment-509936623 const width = w.getBounds().width; w.setBounds({ width: width + 1, }); w.setBounds({ width, });
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”。
系统macOS10.14.4 无法毛玻璃~ css生效了 js也加载了 也修改了vscode的权限 不知道什么是不是electron的bug 还是没有毛玻璃效果~ 求教~
代码就一行,估计是electron的bug了。
同~
不可以用哈
修好了https://github.com/microsoft/vscode/issues/32257#issuecomment-508957632