vscode-transparent-glow

transparent vscode css

Original link [https://jinkey.ai/post/tech/ru-he-pei-zhi-tou-ming-fa-guang-de-sao-qi-vscode](https://jinkey.ai/post /tech/ru-he-pei-zhi-tou-ming-fa-guang-de-sao-qi-vscode) Please indicate the source

Exchange QQ group 706964206

Latest support for vscode 1.36 version

1 Install custom JS and CSS plugins

Plugin screenshot

2 Install glow theme

Plugin screenshot

3 Add style configuration file

In the VSCode installation directory (you can choose a folder at will), put the following files. For the convenience of downloading, the files are organized into Github-Jinkeycode/vscode-transparent-glow, welcome star.

enable-electron-vibrancy.js Open electron transparent support

vscode-vibrancy-style.css Here use the style provided by @孤狼

synthwave84.css Text glow style, please get the style on Github. If you want to not shine, you can use synthwave84-noglow.css. You can watch https://github.com/robb0wen/synthwave-vscode to keep updated notifications.

toolbar.css After introducing the above style configuration of the Great God, some of the titles in the left navigation bar are still not transparent. I modified the configuration myself and can import it.

terminal.css Make the built-in terminal of vscode transparent

Modify the color of the terminal cursor, provided by @manonloki

.panel.integrated-terminal .xterm-cursor,
.xterm-cursor-block {
  background: rgb(210, 0, 252) !important;
}

4 Modify VSCode configuration file

Click on the figure above Edit in setting.json, open it and add the configuration (No braces, just add the key-value to the original json): setting.json

5 reload

Press Ctrl + Shift + P, run "Reload Custom CSS and JS", and restart vscode. If it says VSCode is damaged, just select the gear "Don't prompt again" in the upper right corner.

#6 summary The effect of the finished product is shown in the figure. If you don’t understand, you can add a small assistant WeChat udujjb to pull you into the group and ask

The above tutorial is based on MacOS. For Linux users, please refer to how to turn on transparency; Windows electron does not support vibrancy mode, you can use the plug-in [GlassIt-VSC](https://marketplace.visualstudio.com/items?itemName=s-nlf -fh.glassit) Set transparency.

Custom CSS and JS Loader configuration

Linux Transparent Window