DEV Community

loading...
Cover image for Transparent Background in Vscode

Transparent Background in Vscode

anubra266 profile image Abraham Anuoluwapo ・1 min read

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.

Linux Screenshot

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
Enter fullscreen mode Exit fullscreen mode

Happy Vscoding!!!

Discussion (2)

pic
Editor guide
Collapse
kaspermroz profile image
Kasper MrΓ³z

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

Collapse
fidohun profile image
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!