DEV Community

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

Emmanuel K on December 28, 2018

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 havin...

Read full post

Bradley McCrorey • May 15 '19

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!

Kaliham • Dec 1 '19

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?

kevin • Jan 8 '20 • Edited

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

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

Alexander M. • Nov 26 '21

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

Derek Rowe • Mar 12 '19 • 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.

Mridul • Apr 30 '20

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

Ole Kristian Mørch-Storstein • Mar 7 '19

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

peacengell • May 11 '19

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.