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.

[1-800-jono]

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: #32257

[1-800-jono]

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.

[ARHollisSr]

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

[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 #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: yshui/picom#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

[codebasu]

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?

[convers39]

Still no update on a transparent UI solution on Mac?

[sgarbesi]

@convers39 @darkguy2008 @jaweii @pcgeek86 @ckissane Made an easily injectable PR. Even if it's not accepted, it should be trivial to integrate with future upgrades to the project. Hopefully a senior coder on the project ports it or they merge the PR. Good luck guys.

#151678

[yubaoquan]

Any progress ?

[cjwijtmans]

the issue on windows making the whole window transparent is that text becomes unreadable.

[1-800-jono]

To make VSCode transparent (also in MacOS) install APC Customize UI++ then add this to settings.json file:

  "apc.electron": {
    "backgroundColor": "rgba(40, 42, 54, 0.8)", // Set this to desired bg color
    "frame": false,
    "transparent": true,
    "titleBarStyle": "hiddenInset",
    "vibrancy": "ultra-dark",
    "opacity": 0.85, // Range: 0-1 (To go fully transparent, set it to 0)
    "visualEffectState": "active"
  },
  "workbench.colorCustomizations": {
    "editorGroupHeader.tabsBackground": "#00000000",
    "sideBar.background": "#00000000",
    "sideBarSectionHeader.background": "#00000000",
    "editor.background": "#00000000",
    "peekViewEditor.background": "#00000000",
    "peekViewEditorGutter.background": "#00000000",
    "peekViewTitle.background": "#00000000",
    "peekViewResult.background": "#00000000",
    "tab.activeBackground": "#00000000",
    "tab.inactiveBackground": "#00000000",
    "statusBar.background": "#00000000",
    "statusBar.debuggingBackground": "#00000000",
    "statusBar.noFolderBackground": "#00000000",
    "statusBarItem.activeBackground": "#00000000",
    "panel.background": "#00000000",
    "activityBar.background": "#00000000",
    "terminal.background": "#00000000"
  }

Finally :)

[LogixTheDev]

To make VSCode transparent (also in MacOS) install APC Customize UI++ then add this to settings.json file:

  "apc.electron": {
    "backgroundColor": "rgba(40, 42, 54, 0.8)", // Set this to desired bg color
    "frame": false,
    "transparent": true,
    "titleBarStyle": "hiddenInset",
    "vibrancy": "ultra-dark",
    "opacity": 0.85, // Range: 0-1 (To go fully transparent, set it to 0)
    "visualEffectState": "active"
  },
  "workbench.colorCustomizations": {
    "editorGroupHeader.tabsBackground": "#00000000",
    "sideBar.background": "#00000000",
    "sideBarSectionHeader.background": "#00000000",
    "editor.background": "#00000000",
    "peekViewEditor.background": "#00000000",
    "peekViewEditorGutter.background": "#00000000",
    "peekViewTitle.background": "#00000000",
    "peekViewResult.background": "#00000000",
    "tab.activeBackground": "#00000000",
    "tab.inactiveBackground": "#00000000",
    "statusBar.background": "#00000000",
    "statusBar.debuggingBackground": "#00000000",
    "statusBar.noFolderBackground": "#00000000",
    "statusBarItem.activeBackground": "#00000000",
    "panel.background": "#00000000",
    "activityBar.background": "#00000000",
    "terminal.background": "#00000000"
  }

Finally :)

This doesn't work for me, on Windows 11. Looks like it's a broken extension... on top of not doing anything, it throws errors:

I had more luck with GlassIt-VSC. No configuration needed (though it is configurable) and no editor errors :) Demo Screen-Rec

It still could do with an acrylic blur though!

[Rdeisenroth]

Sooo after all these years, we're back to no working solution on Linux again... Great. Guess i'll have to go back to the code-translucent aur package