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!!!

Top comments (19)

Collapse
 
kimono76 profile image
kimono

Is there any way to apply this on wayland?

Collapse
 
anubra266 profile image
Abraham

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

Collapse
 
jsiu profile image
John Sing Dao Siu

It is working on ubuntu 20.04

Collapse
 
joaofagundesl profile image
Joao Fagundes • Edited

Yes, however you need to know you compositor. In my case im using hyprland, so you can edit your hyprland.conf and set the opacity. The opacity will be applied to the entire system. If you want to set only vscode, you can use the windowrules. This extensions won't work because it is based on x11.

Collapse
 
jimbcc profile image
Jim

Yes, It just worked in Wayland, but it's not soft blur, it's just basic transparency

Collapse
 
omarageorge profile image
George Omara

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

Collapse
 
shamimsyead profile image
Syead Riad

Theme name please.

Collapse
 
anubra266 profile image
Abraham

Electron Vue Darker

Collapse
 
shamimsyead profile image
Syead Riad

Thanks. Its beautiful.

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
 
kaspermroz profile image
Kasper Mróz

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

Collapse
 
prajulaaditya007 profile image
Prajul Sahu

Did you try it? I'm using Ventura, will glassit work?

Collapse
 
jami999 profile image
jami

I tried like this

yabai -m rule --add app="^Code$" opacity=0.3
Enter fullscreen mode Exit fullscreen mode

But it doesn't work on Intel Mac 2020 Sonoma.

Collapse
 
nivicius profile image
Vinicius Pereira

Very good! Thank you!

Collapse
 
inaciolopes1 profile image
Inácio Lopes

Does not work on macOS 10.15

Collapse
 
kiyosama17 profile image
Kiyosama

the extension also makes the code transparent, not just the background. and that's very annoying for me.

Collapse
 
calvinkwame profile image
UrAverageGhanaian

How do I completely revert this to default? I uninstalled the Glasslit extension but the effect persists. Any help?