Transparent Background in Vscode
#vscode
Abraham

Abraham @anubra266

About: Full Stack Developer and Open-source enthusiast.

Joined:
Jun 2, 2020

Transparent Background in Vscode

Publish Date: Mar 25 '21
108 19

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

Comments 19 total

  • FidoHUN
    FidoHUNMar 25, 2021

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

  • Kasper Mróz
    Kasper MrózApr 10, 2021

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

    • Prajul Sahu
      Prajul SahuMar 19, 2023

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

  • Syead Riad
    Syead RiadOct 23, 2021

    Theme name please.

  • George Omara
    George OmaraJan 29, 2022

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

  • kimono
    kimonoMar 13, 2022

    Is there any way to apply this on wayland?

    • Abraham
      AbrahamMar 15, 2022

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

    • Jim
      JimAug 4, 2022

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

    • Joao Fagundes
      Joao FagundesFeb 9, 2023

      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.

  • Burak
    BurakJun 18, 2022

    Awesome

  • UrAverageGhanaian
    UrAverageGhanaianJun 30, 2022

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

  • Inácio Lopes
    Inácio Lopes Mar 10, 2023

    Does not work on macOS 10.15

  • Fitria Widyani
    Fitria WidyaniJun 7, 2023

    is not working on mac M1 ventura, help me :)

  • Kiyosama
    KiyosamaApr 12, 2024

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

  • jami
    jamiMay 19, 2024

    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.

  • Vinicius Pereira
    Vinicius PereiraJul 12, 2024

    Very good! Thank you!

Add comment