Today, I saw the cool frosted glass effect of vscode on the Internet. Frankly speaking, it adds transparency. My curiosity made me want to try it again. All right. A little frills, I admit!

Warm reminder, onlymacOSSystem!

Step one, download the necessary plug-ins”Custom CSS and JS Loader”

1️ Click the square extension icon on the left of the VScode window or shift + Commond + p to search for Install Extensions and press Enter

2️ search Custom CSS and JS Loader download can be

Step 2: Create CSS and JS files

1️ one to create two files Custom.css and Custom.js on your computer (it is suggested to create them in a place where the two files will hardly be moved) 2️ one to copy the following codes to the corresponding custom.css and Custom.js respectively and save them.

  • 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. 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. Select-text {background-color: rgba(58, 61, 65,0.6)! important; }. Monaco -editor. Focused-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; }Copy the code
  • custom.js
  nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');
Copy the code

Third, add the following configuration tosetting.json

One ️ code-preference-setting-2 ️ one copy of the following code into setting-json 3️ one as you see on the path of two files configured with custom.*, the problem comes, some partners do not know what their file path is specifically? Here’s a tip for you. Open your Chrome browser, drag the file into your browser, and copy it.

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

Step 4: Execute the commandReload Custom CSS and JS

1️ shift + commond + p 2️ one

Step 5: Restartvscode

Done!!

Reference

Github.com/Microsoft/v…

Vscode cool frosted glass effect