Electron 可以調(diào)用 MacOS 的毛玻璃效果，下面讓我來帶你給 VScode 添加毛玻璃效果。

2. 創(chuàng)建一個 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. 創(chuàng)建一個 JS 文件

nodeRequire('electron')

.remote

.getCurrentWindow()

// 設(shè)置半透明效果 https://electronjs.org/docs/api/browser-window#winsetvibrancytype-macos

.setVibrancy('ultra-dark');

4. 修改 settings.json 添加以下內(nèi)容

"vscode_custom_css.imports": [

"file:custom.css",

"file:custom.js"

],

"vscode_custom_css.policy": true

5. 輸入命令(??P) “Reload Custom CSS and JS”

6. 重啟 VScode

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

總結(jié)

以上是生活随笔為你收集整理的mac vscode 背景半透明_给 vscode 添加半透明毛玻璃效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。