Transparent Background in Vscode

So I came across the Show off your VSCode Setup 👩🏻‍💻💯 Post on Dev.to, and
I decided to post a screenshot of my setup.

So as a reply to a comment, by @FidoHUN, I'll be telling you how to accomplish this.

Applying on Windows

Install the Glass-it Extension from the vscode marketplace

Press ctrl+alt+z to increase the transparency, ctrl+alt+c to decrease.

Applying on Linux

Requirements

• Xorg display server
• xprop package.

Then like on windows, install the Glass-it Extension from the vscode marketplace

Press ctrl+alt+z to increase the transparency, ctrl+alt+c to decrease.

Applying on Mac-Os(Untested)

Tweaking Vscode has proven to be harder on the MacOs. But we can try.

Install yabai
Then:

yabai -m rule --add app="Visual Studio Code" opacity=0.7

Happy Vscoding!!!

Comments

[kimono]

Is there any way to apply this on wayland?

[Abraham]

Hi...I've not tried it yet.

[John Sing Dao Siu]

It is working on ubuntu 20.04

[George Omara]

Wow this is Awesome! Tried it, and it just worked.
Thanks a lot for the post.

[Kasper Mróz]

This looks so cool, gotta try it out on MacOS!✨

[FidoHUN]

Wow! Thanks bro! I thought thats a wallpaper, not a glass effect, but it looks really nice with my desktop background. Thanks the tutorial!

[Syead Riad]

Theme name please.

[Abraham]

Electron Vue Darker

[Syead Riad]

Thanks. Its beautiful.