DEV Community

Emmanuel K
Emmanuel K

Posted on • Updated on

How to be cool and make Visual Studio Code (VSCode) transparent

transparent vscode window
I'm a huge fan of applications that can enable transparency. No particular reason. I just love the aesthetic. Others may find this useful by having terminals in the background that they can mildly observe through the transparency etc

This is also quite a requested feature on the Visual Studio Code Github issues for a while now but there are no official solutions as of this writing. Hopefully that will soon change (see MacOS section below for more info on this).

However, unofficially, these are the ways you can make VSCode transparent on your OS. Inspired by this github issue

How to make VSCode transparent on Windows (tested on Windows 10)

Windows users have the simplest solution. Just install the GlassIt-VSC extension

In the VSCode settings (File > Preferences > Settings OR Ctrl + ,):

  • glassit.alpha (integer): Transparency level [1-255]
  • glassit.step (integer): Increment of alpha OR: ctrl+alt+z to increase transparency and ctrl+alt+c to decrease it as set by the extension (take care it doesn't override some other shortcuts assigned these hotkeys)

How to make VSCode transparent on Linux (tested on Ubuntu 18.04)

For Linux this is particularly easy. First of all you will need devilspie (pron. Devil's Pie).
For the curious ones, devilspie is a non-gui utility that lets you make applications start in specified workplaces, in specified sizes and placements, minimized or maximized and much more based on simple config files.



sudo apt-get install devilspie
mkdir -p ~/.devilspie
nano ~/.devilspie/vscode_transparent.ds


Enter fullscreen mode Exit fullscreen mode

Then you copy and paste the following code into the file you just created vscode_transparent.ds



( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY 0xdfffffff") )
)
)


Enter fullscreen mode Exit fullscreen mode

You can set your intended opacity using the hex string at the end 0xdfffffff(this is about 87% opaque which is adequate for me). It has a range of 1 to 99.

If you want to avoid all the hex math you can use percentages in your script like this (replace 87 with your desired opacity):



( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY $(printf 0x%x $((0xffffffff * 87 / 100)))") )
)
)


Enter fullscreen mode Exit fullscreen mode

You will notice that with devilspie, you can write a script to start any program with opacity. You just need to get the launch name of the application (in our case 'Code') and write a similar script. So you can also launch Sublime (subl) with opacity too.

On KDE Plasma apparently (I haven't tested this), you can even take it further. KDE has a blur effect you can enable as well as transparency:(see original github comment and a follow-up comment)



(if (contains (window_class) "Code")
    (begin
        (spawn_async (str "xprop -id " (window_xid) " -f _KDE_NET_WM_BLUR_BEHIND_REGION 32c -set _KDE_NET_WM_BLUR_BEHIND_REGION 0 "))
        (spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY 0xdfffffff"))
    )
)


Enter fullscreen mode Exit fullscreen mode

I'd love to know if anyone knows anyway to achieve this blur on Ubuntu 18!

How to make VSCode transparent on MacOS (untested)

MacOS users don't have many options with the current VSCode release (save for some inefficient hacks). However an amazing pull request is currently open that will add gorgeous transparency on all three platforms (Windows, Linux and MacOS). Currently there is no information about when this PR will be merged into a major release but hopefully it will be soon. For now, MacOS users (and others too) can use a source build of VSCode based on this pull request's branch.

Instructions for building and running VSCode from source on all three platforms found here and the referenced pull request

If any MacOS or other OS users have already tried this PR, please let me know. I will also test this and update this post soon with my findings.

Please upvote or contribute to the pull request so that we can get this awesome feature merged into our favorite code editor!

Top comments (11)

Collapse
 
4fthawaiian profile image
Bradley McCrorey

re: mac os - I've got transparency working, albeit through a sort of backdoor. I'm using the amazing chunkwm as my window manager (tiling.. yum). I discovered recently that it had a plugin which allowed for dimming of inactive windows. A little searching yielded the fact that you can dim any window by app name, using this syntax in the .chunkwmrc file:

chunkc tiling::rule --owner Code --alpha .85 &

ymmv, as the window manager is probably overkill just to get transparency in vscode, but being that I was already running the window manager, it suited me just fine :) I should mention that obviously you can make any app transparent this way. The possibilities are endless!

Collapse
 
kaliham profile image
Kaliham

so when I went to install chunkwm I got recommended yabai instead so I installed it but the command :

~|⇒ yabai -m config normal_window_opacity 0.85

~|⇒ yabai -m config active_window_opacity 0.9

apply to all windows got a clue on how to do it on a single app instead?

Collapse
 
kevsestrella profile image
kevin • Edited

yabai -m rule --add app="Brave Browser" opacity=1.0

from github.com/koekeishiya/yabai/blob/...

Thread Thread
 
amordo profile image
Alexander M.

I spent some time to get right name
Use app="Code" in case of VSCode
Relevant explanation (I just used grep instead jq):
github.com/koekeishiya/yabai/issue...

Collapse
 
derekrowe20 profile image
Derek Rowe • Edited

I finally got this to work on Elementary OS Juno:
I changed the command "nano ~/.devilspie/vscode_transparent.ds" to "nano ~/.devilspie/code_transparent.ds" I pasted the devilspie code in (only the one with the transparency defined in the hex code works) and pressed ctrl+s to save and then ctrl+x to exit. Then you have to run devils pie at startup by adding the command "devilspie" in settings/applications/startup.

I'm not sure if changing the file name from vscode_transparent.ds made this work or if using the hex code and not the 87/100 code made this work. But it does not work without devilspie running.

Collapse
 
mkvmridul profile image
Mridul

Basically changing name has no impact, it is just that using the hex code with 87/100 caused an error
" unrecognized argument $((0xffffffff "
This was the error in the second code

Collapse
 
joaquincardonaruiz profile image
JoaquinCardonaRuiz

I got this to work on KDE by making a small Tweak.

( contains ( window_name ) "Code" )

instead of

( contains ( window_class ) "Code" )

Also, as Derek said, you have to run devilspie for it to work.

Collapse
 
peacengell profile image
peacengell

Hey man I was looking for this long time ago, you just make me happy to use vscode again :D. Thanks you bro.

It's just work with the """You can set your intended opacity using the hex string at the end 0xdfffffff(this is about 87% opaque which is adequate for me). It has a range of 1 to 99. """"

The only things I am stuck with is how can I convert 75% to the hex string.

How can I find the right transparent for me..

Please give me something thanks you in advance.

Collapse
 
okms profile image
Ole Kristian Mørch-Storstein

Great tips here Emmanuel, just what I was looking for actually.

Collapse
 
fmstrat profile image
Ben C

Linux is much easier now. Just install the GlassIt-Linux extension: marketplace.visualstudio.com/items...

Collapse
 
gergoo007 profile image
Gergoo007

Sadly, you can barely see the text, so transparency is a bit limited. You can use code-transparent (aur.archlinux.org/packages/code-tr...) instead.