DEV Community

Cover image for Transparent Background in Vscode
Abraham
Abraham

Posted on

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.

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 (9)

Collapse
kimono76 profile image
kimono

Is there any way to apply this on wayland?

Collapse
anubra266 profile image
Abraham Author

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

Collapse
jsiu profile image
John Sing Dao Siu

It is working on ubuntu 20.04

Collapse
omarageorge profile image
George Omara

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

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!

Collapse
shamimsyead profile image
Syead Riad

Theme name please.

Collapse
anubra266 profile image
Abraham Author

Electron Vue Darker

Collapse
shamimsyead profile image
Syead Riad

Thanks. Its beautiful.