Vscode: Make VSCode window transparent

[pcgeek86]

• VSCode Version: 1.5.3
• OS Version: Windows 10 Anniversary Update
  

  Feature Request

It would be great if we could make the VSCode window transparent, using a percentage.

This was discussed on StackOverflow back in June.

http://stackoverflow.com/questions/38031369/how-to-make-ms-visual-code-transparent

Cheers,
Trevor Sullivan
Docker Captain
Microsoft MVP: Cloud & Data Center Management
https://trevorsullivan.net
https://twitter.com/pcgeek86

[bpasero]

This might require Electron API, thereby setting to upstream.

[alexkrolick]

Looks like the "vibrancy" setting for macOS would cover this on Electron: https://github.com/electron/electron/blob/master/docs/api/browser-window.md#winsetvibrancytype-macos

Support for it was just added to the Hyper terminal app that also uses Electron: https://github.com/zeit/hyper/releases/tag/1.0.0

[PhongAthena]

I hope this feature will appear soon

[ohtangza]

This feature is very useful for running auto-test behind the window during TDD.

[jonathanphz]

I've been dying to have this functionality - this would help build UI's without constantly switching apps.

[thiagomajesk]

Definitely a vs code must have. That way we could achieve this: https://github.com/Microsoft/vscode/issues/32257

[jonathanphz]

Jonathan Perez liked your email
Spark by Readdle

[isalew]

Would love the same for the Mac OS as well.

[paracha3]

+1

[webdevbrian]

👍 looks like someone made a transparent plugin for windows, but mac is still yet to get a solution. https://marketplace.visualstudio.com/items?itemName=s-nlf-fh.glassit

[Tekbr]

-- Sorry for the English, I used Google Translator --

Experiencing the extension. 😄 Thanks @webdevbrian . 👍

[MikePaer]

Confirming that the "Glassit-VSC" extension for Visual Studio Code (on Windows) works great.

[HollisAnthony]

@MikePaer I really hope that becomes available for MacOs ... currently not working yet :)

[darkguy2008]

+1 We SOOOOOOOO need this in OSX.

[lucasqueiroz]

Maybe even an option to set only the explorer and not the code part too?
+1

[sonhanguyen]

for OSX users, https://github.com/rwu823/afloat which has a transparency option does work with vscode, only gotcha is at some point the afloat menu disappears so you have to turn it on when vscode starts

[okinskas]

Is anyone aware of a solution for this on linux?

[samhh]

@okinskas You can give VSCode full window transparency on Linux with devilspie under Xorg. My ~/.devilspie/opacity.ds looks like this:

( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "transset-df -i " (window_xid) " 0.95" ))
)
)

[okinskas]

@SamHH Works great thanks!

[lucasqueiroz]

@SamHH that didn't work for me :/ Do I have to restart the computer or something? I ran devilspie -a and when I open VSCode, it says Set Property to 0.95, but nothing changes...

[samhh]

@lucasqueiroz Check the link in my comment (Arch Wiki is an _outstanding_ resource for Linux), are you running a compositor? I for example am running Compton.

[sergeysova]

Does this issue is a duplicate of #32257?

[ZenMilan]

Will this feature be available for linux users, eagerly waiting for the feature.

[huydhoang]

Very nice, the Glassit extension works beautifully on Windows 10.

[Marahin]

MacOS here, this is a feature I'm waiting for. 👍

[createdbyjurand]

Still waiting for native support of transparency in vscode :)
Options:

• background transparency (without text - because the most important thing here is codding, and to make this user friendly we definitely need to see the code best way possible in the first place, and than have fun using vscode environment - and, of course, for different parts of the app like: terminal, explorer, menu, side menu...)
• text transparency (i guess there will be some that will use this also)
• vibrancy effect (this will not work everywhere, however why not let those who are software ready, just have it)

[raylee]

TextMate2 allows for RGBA specification in their themes. I think that would be a nice way to handle this in VSCode once support lands upstream, allowing theme authors do so whatever they like for styling the alpha values along with everything else.

In the meantime I'm using afloat on OSX. It's a bit of a kludge as afloat's menus disappear when VSCode changes the menu structure, but you can engage the transparency when VSCode first starts up.

[DAVIDhaker]

Will good if VSC will have transparency feature, like gnome-terminal. Transparent only background, text is not transparent.

KDE

[jumpyoshim]

+1 for adding this to OSX.

[lunarfyre7]

I modified the code @SamHH to trigger the blur effect in kde, it yields a very nice result with the new blurring in plasma 5.13! I found that for some reason transset-df wasn't working on my system so I used a kwin rule instead to set the opacity.

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

[LeviZell]

For Linux users, I found this solution

Needed a restart but works perfectly for Ubuntu 16.04

[lloydjatkinson]

Can we have just a terminal transparent?

[lunarfyre7]

@lloydjatkinson that might be possible with custom css, at least for it to show the editor underneath.

[zea7ot]

MacOS here too!
Desperately need this feature!

[xxx7xxxx]

NEED THIS LIKE iTerm2.

[erasmo-marin]

OSX here, transparent backgrounds are very common in Mac OS, even system apps like finder use it. Please do it ❤

[benniemosher]

MacOS here as well!
I would love this feature, one of the things most text editors forget. This feature could make me a lifetime user.

[raylee]

An implementation request for anyone who wants to work on this feature: Textmate allows RGBA colors in theme files, which permits each part of the interface to have its own opacity values. (Sublime Text 3 also allows this, but last time I tried it ignores the alpha values.)

In the meantime on OSX I'm using this fork of afloat: https://github.com/w0lfschild/afloat . It contains a fix I made to delay installing the extra menu items related to afloat's features, which makes it work in more situations than before.

It's not perfect by any means. Afloat is a bit annoying to install on OSX due to System Integrity Protection, and if the app rewrites the menus the afloat plugin doesn't notice and so transparency controls will be gone until the app is restarted.

Supporting transparency directly in the editor would really help. I find transparent backgrounds to be an accessibility issue for me -- my eyes are much happier with a faint background showing through and I end the day feeling less eye strain. Also it's pretty, and who doesn't want a beautiful work environment? :-)

[ikbelkirasan]

This devilspie script should work for ubuntu 18.04 users.

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

[thienlh]

Please support this for macOS 🤞

[LutfiZakaria]

Thanks to @ikbelkirasan . It works very nice in Ubuntu 18.04.
I have -set _NET_WM_WINDOW_OPACITY 0xd0000000 rather than -set _NET_WM_WINDOW_OPACITY 0xdfffffff. My code screen looks very clear now

[loretoparisi]

Please support this for macOS 🤞

[a-marionette]

+1 for macOS support

[webispy]

Thanks to @SamHH
Here is my vscode screenshot on a Linux machine. KDE plasma (blur) + devilspie + vscode

And, following is my ~/.devilspie/vscode.ds script.

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

[zacksleo]

We need it in macOs, just like iTerm2

[PascalPixel]

This is a very basic PR that enables vibrancy on macOS Mojave: https://github.com/Microsoft/vscode/pull/65215 😃

[SoptikHa2]

It looks like it'll be coming into official build!

#52707

[BrianD91]

@webispy @lunarfyre7 Any ideas why I can't seem to get it working? Technically I'm using VSCodium which is a FOSS fork of VSCode, but other than that I don't see why it isn't working for me. Using KDE Neon

[webispy]

@BrianD91 Please check your KDE configuration.
https://www.reddit.com/r/unixporn/comments/9un99u/kde_plasma_do_you_need_so_more_blur/

[kubre]

You can achieve this with compton, just add
opacity-rule = [
"94:class_g = 'Code'"
]
Heres result

[SoptikHa2]

@vkubre

It looks like I need to start compton after code is already running, it doesn't seem to work otherwise. For example: start code; then start compton; (code is transparent); close code; start code; (code is not transparent).

However it looks great and after initial setup works flawlessly. Thanks for this.

Edit: It seems to fix itself after restart without any need for further manual setup.

[fffredy]

Hi, man I am a Mac user and I don't have enough information about using electron or other things. I downloaded vs code today. And I want to make vs code background transparent as u did in the post. I have already tried to access src/vs/ folder but unfortunately I did not be able to access that. There is not any video for making it transparent. Since I don't know how to re-build vs code I did not be able to make vs code transparent. PLEASE, PLEASE make a video tutorial from beginner to the end on how to make vs code transparent. It looks easy for you to make it but I am sure that it is really hard for a beginner programmers like me. I hope you will reply to me. Have a nice day

[mafflerbach]

You can achieve this with compton, just add
opacity-rule = [
"94:class_g = 'Code'"
]
Heres result

Here is for code insider user:

opacity-rule =
[
    "70:class_g = 'Code - Insiders'"
];

[DRSDavidSoft]

@webispy @lunarfyre7 Any ideas why I can't seem to get it working? Technically I'm using VSCodium which is a FOSS fork of VSCode, but other than that I don't see why it isn't working for me. Using KDE Neon

@BrianD91 You might be interested in this:
https://github.com/sergei-dyshel/vscode/blob/master/README.fork.md

[StarrKiss]

The devilspie solutions work, but how do I change the opacity to 51% instead of the given amount using the hex code?

[ShayBox]

I would look for a more proper implementation, as just telling your compositor to apply transparency and blur applies to all elements equally, including fonts, this needs to be an internal thing, but that screen shot looks good :+1:

[BobbyBabes]

@StarrKiss

but how do I change the opacity to 51% instead

https://dev.to/emmanuelnk/how-to-be-cool-and-make-vscode-transparent-56ib

[StarrKiss]

@BobbyBabes No, I got that. For blur on KDE, it only works with hex code. How to I change the hex code value to 51? I tried hex code converters and replacing the numbers at the beginning and end and nothing fixes it.

[kubre]

Update with compton: Only having transparency with compton sometimes makes code harder to read. You can use This fork to use blur options also.

Material Theme:

1984 Theme:

[BobbyBabes]

@StarrKiss

@BobbyBabes No, I got that. For blur on KDE, it only works with hex code. How to I change the hex code value to 51? I tried hex code converters and replacing the numbers at the beginning and end and nothing fixes it.

It's in the article. The writer's example for 87% (EDIT: see the third code box from the top.):

-set _NET_WM_WINDOW_OPACITY $(printf 0x%x $((0xffffffff * 87 / 100))

So for 51% it becomes :
-set _NET_WM_WINDOW_OPACITY $(printf 0x%x $((0xffffffff * 51 / 100))

[WillPower3309]

Check out https://github.com/coler706/vscode

[annymosse]

@WillPower3309 is there ready production release (debnappimage,snap)?

[WillPower3309]

@annymosse unsure, I just contributed the readme. It can be compiled from the source but I'd contact @coler706

[annymosse]

thank you @WillPower3309 ,i'm newer at docker wold and GitHub also but with my little experience i yjink tarvisCLI can do it automatically with each new changes (if no) ,(surely) docker can do that coz i want to keep my disto clean as much as i can for the stability.

[marcel-dempers]

If you are running Linux, I found devilspie very useful and made a video on it.
Also found a little formula that helps set a % transparency

Hope this helps!
https://youtu.be/PzObHq72Vug

[annymosse]

@marcel-dempers it's not a good solution which we can't customize the vs code part separated such as these pictures vibrant window theme

[vscodebot[bot]]

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details here. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!

[juanccamachob94]

If you are running Linux, I found devilspie very useful and made a video on it.
Also found a little formula that helps set a % transparency

Hope this helps!
https://youtu.be/PzObHq72Vug

Works on Elementary O.S. 5.0 Juno

[tiritto]

Using devilspie or compton transparency is just a big workaround that results in applying same level of transparency to everything all at once which is probably far from desired for many people asking for opacity support. We need a way to make only a specific element transparent without applying it to other elements. For example, you might want to have your VSCode background to be fully transparent without affecting your code/text in the process.

[bvibhav]

I've set keyboard shortcuts for these two commands in Ubuntu for making any overall window transparent. However, I would like to control transparency of individual areas in VSCode interface.

transset --inc .05 -a
transset --dec .05 -a -m .6

[vegerot]

It looks like it'll be coming into official build!

52707

One year later

[Fmstrat]

Hah, and I just released a GlassIt for Linux: https://marketplace.visualstudio.com/items?itemName=nowsci.glassit-linux

[annymosse]

@Fmstrat it make the whole window transparent which is able to get that effect without your ext ,the main goal is to make some part transparent https://github.com/microsoft/vscode/issues/32257 or image preview

[Fmstrat]

@annymosse Oh yes, having native fade support is way better but MS has stated they won't merge in Electron focused changes.

@vegerot It looks like that PR was closed and will not be merged.

[annymosse]

@Fmstrat look like MS team still against Linux users and won't give up, to make the users switch back to windows , the truth is "WE'RE FREE TO USE ANY SYSTEM WE WOULD LIKE" the freedom of ower minds making this world unlimited, WINDOWS & MAC achieved them end-life and not obligation to waste money for uncomfortable system.

[darkguy2008]

@Fmstrat look like MS team still against Linux users and won't give up, to make the users switch back to windows , the truth is "WE'RE FREE TO USE ANY SYSTEM WE WOULD LIKE" the freedom of ower minds making this world unlimited, WINDOWS & MAC achieved them end-life and not obligation to waste money for uncomfortable system.

Well, nobody is pointing a gun at you to use VSCode on Linux. With plenty of other editors since it's all open-source and all that jazz, you're free to not to use VSCode then, and leave us Windows users happy with such a great OS.

[annymosse]

look like Windows is your house and them team is your family ,then i didn't hurt them after all this's my vision and i have the freedom to explain my opinions under the respect , MS & Apple are commercial companies as they have the freedom to advertise them products (even with some fake less service as they provide) as we have a right to say the truth of our bad experience.
Sorry to the Windows users "I'm not pointing a gun over your heads" and Linux not my company and all the people know Linux is a free & non-profit organisation .
@darkguy2008 be a white heart no matter your skin color is,we're here to make a good world & simple life by our minds not our force and guns.
this issue related to the transparency feature over a cross platforms not to shoot each others .

[monika-prajapati]

Hey!
I use Arch Linux where I have been using picom for transparency and blur effect. It works for vs studio/code oss. I heard compton-tryone provides kawase blur which is not available on picom at the moment.

[annymosse]

@monikaprajpt Picom is a fork of compton, which is a fork of xcompmgr-dana, which in turn is a fork of xcompmgr.
all of them affect the process , and you can't customize each part of the editor like:
then the result of these hacks make the text code not readable like this image because these solutions affect the process instead the elements .

[PascalSenn]

@monika-prajapati FYI: https://github.com/yshui/picom/pull/382 @tryone144 is working on the integration for picom

[WillPower3309]

@monika-prajapati FYI: yshui/picom#382 @tryone144 is working on the integration for picom

This will blur it, but afaik still requires transparency on the vscode end

[RahulTitor]

Really wish we could adjust each elements transparency in Arch...

[ckissane]

@Boss-U My fork works perfectly fine on arch with KDE plasma kwin and other blurring compositors!
https://github.com/ckissane/vscode
and unlike glassit it keeps the text full opacity

[Fmstrat]

@Boss-U @ckissane Yikes:

This branch is 10 commits ahead, 8736 commits behind microsoft:master. 

[ckissane]

Lol yeah I'll merge vscode master in

[ckissane]

@Fmstrat @Boss-U now it's 12 commit's ahead 0 behind

[Minionbob2019]

Hi all,
I'm not sure if it would at all be helpful but just wanted to suggest this lightweight utility called WndowTop to Windows10 users. (https://windowtop.info/) Give it a try and it can make any code/text editor window (including vscode) transparent in no time. It costs $5.99 for three pcs. I know it's not the same as having this functionality inbuild in vscode but it works well for me on Wondows10. So, I thought of sharing it.

[jaweii]

𝗥𝗘𝗢𝗣𝗘𝗡 𝗧𝗛𝗘 𝗙𝗘𝗔𝗤𝗨𝗥𝗘 𝗥𝗘𝗤𝗨𝗘𝗦𝗧 𝗣𝗟𝗘𝗔𝗦𝗘!!!

[darkguy2008]

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details here. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!

Do you still need a year to reconsider?