Adding background transparency support for MacOS

[sgarbesi]

This PR provides the ability for the IDE's background to be fully transparent on Mac OS. I believe this should work on both Windows and Linux as well, however, I've only tested it on Mac OS 12.4.

Electron issue: if at any time the BrowserWindow backgroundColor is set to a color hex/value without transparency, the window can no longer be made transparent. A new window needs to be spawned. Upon checking off the transparency setting, the user will need to restart the application or close/re-open the window for it to take effect.

There are hardcoded values for the workbench background located here:
https://github.com/microsoft/vscode/blob/main/src/vs/workbench/common/theme.ts#L14

These values need to be overwritten to achieve the transparency effect.

I'm not very experienced with the coding on this project, and I didn't want to go changing massive amounts of code. I could've very easily made a 2-3 line hack and achieved my goal. However, since I've seen such demand for this throughout the Internet, along with my own demand, I figured I would try to package something that a senior developer on the project could port to the main branch if this PR doesn't suffice.

I only spent a few hours getting this to work, as I've been down this road before with Atom which uses Electron. The transparent option cannot be altered for a BrowserWindow instance after it's created, to my knowledge. I would've liked to have written a plugin, which again, maybe is possible, but due to my lack of experience with this project and the code required to be injected into the BrowserWindow options, I assumed it wasn't possible/adequate.

By enabling the new transparency setting and using a plugin such as Customize UI a user can achieve the following UI:

Here's a sample of my user settings.json file:

{
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.transparency": true,
    "workbench.colorCustomizations": {
        "editor.background": "#00000000",
        "sideBar.background": "#00000000"
    },
    "customizeUI.stylesheet": {
        ".monaco-workbench": "background: rgba(0, 0, 0, 0.7) !important;"
    },
    "customizeUI.titleBar": "inline",
    "window.titleBarStyle": "native",
}

If you have any questions, or if there's anything I can do to help, please let me know. I've been coding for ~20 years, I cannot use an IDE without transparency support. My IDEs for the past 20 years have been TextMate and Atom. With Atom being sunset, this was the only feature preventing me from switching to VSCode. I had to take matters into my own hands. In the worst-case scenario, I can periodically re-build VSCode from time to time with my changes to support transparency, but I think it would be much nicer to have this integration built into the application for the entire community.

Reference: #12578

[ghost]

All CLA requirements met.

[lapraswastaken]

For what it's worth, I've tested these changes myself and they work on my Linux installation.

I'm running Arch (btw) with Picom as my compositor.

I'd love for this to be an official part of VS Code.

[Piras314]

+1

[1-800-jono]

Can't wait for this to be official :)

[sgarbesi]

@bpasero Is there anything I can do to help get this merged?

[netpoetica]

This PR looks very clean, and uses all of the high-level hooks afforded to a contributor without having to dive down and hack anything. This is a sound implementation. This should be merged. Can we get any owners to look at this? This is a well-requested feature (per #12578).

Thanks for this @sgarbesi - I was quite surprised about your changes here, I figured this would need more native-level code, especially for cross-platform support. It looks like VS Code already has done 99% of the work required to make this a thing but just didn't cross the finish line :p cheers.

[aurexav]

But why the state of this PR is drafted?

[sgarbesi]

But why the state of this PR is drafted?

@bpasero I'd be interested in some feedback from a maintainer who approves merges. If there's some bit of code that I can change that would suffice for a merge approval I'd be willing to make the change.

Not being able to automatically update the project and have to work off of my fork, or re-base every X (X being when I feel like it) isn't a ideal experience.

Maybe if we have more feedback from the community showing their desire for this feature they'll move it up the list. My best guess 🤷🏻‍♂️

[bpasero]

Thanks for the PR, to give an update from my end: we as a team first have to decide that supporting transparency in the VS Code editor is something we want to support (today and going forward) and then we can look into this PR as a help to implement it (thanks for that).

Being one of the maintainers of Electron in VSCode I am always a bit worried about enabling new features from Electron into VSCode that we have no prior experiences in, for example:

• what does it mean for performance (rendering, etc.)
• will Electron support this on all OS today and going forward
• are there subtle issues that could result from transparency that are hard to relate to

Thanks for understanding 👍

[sgarbesi]

@bpasero Thank you for your reply.

• There's definitely a performance impact as there's more work on the CPU/GPU for rendering. However, in my experience, the effect is insignificant to where it degrades the user experience.

• Electron has supported transparency for quite some time now, I don't know of an exact date, I'm sure you can go digging through old Electron PRs, but I know it's been supported for years. I changed Atom's IDE during one of the earlier releases to implement this same feature.

• None that I'm aware of.

Does the VSCode project have an experimental features section similar to Google's Gmail? Maybe this is something that could reside there.

[bpasero]

We do have experimental settings but we typically want to turn them to real settings in 1-2 milestones.

Btw this PR is also incomplete as it relies on an extension to patch the core CSS, at least if I understand correctly. Adding info-needed to clarify this.

[sgarbesi]

@bpasero This PR would give the ability for any theme to have a background with transparency. The example I provided with Customize UI just allows a user to override any pre-existing values for a given theme.

For example, I personally prefer the "Visual Studio Dark" theme. Rather than cloning that theme and making my own, I'm easily able to just override the background color with the Customize UI plugin/extension.

If I were to create a new theme, I could simply just add the values to the new theme's CSS without any plugin/extension and achieve the transparency effect.

Does this make sense?

The PR doesn't rely on any custom plugins/extensions.

[bpasero]

But if this is a setting the user can enable, I would assume this works with any theme, no? We should understand that transparency is on and update the background color that comes in from the theme based on that setting imho.

[sgarbesi]

@bpasero Yes.

This is what's breaking the ability to achieve transparency on a window:
https://github.com/microsoft/vscode/pull/151678/files#diff-4d3456ec66ae1cb9a0548eb4f5520c7e43e3502fe7bc526ed3977e0f85e097aaL123

As I said before, once a window is made opaque with Electron, there doesn't seem to be a way to dynamically update its transparency without spawning a new window.

This in theory could be excluded:
https://github.com/microsoft/vscode/pull/151678/files#diff-fbd7e23f066a8ec2fcf88c3a3dc8742649134505f0e6d8ca28ddb9f0f00d0fefR206

However, I cannot remember if VSCode is setting a default background color for a given theme as a fallback if one isn't currently present. That may have been the reason I changed that line there.

I'm now beginning to wonder if changing the values in the file below to include transparency in the HEX would fix the entire issue. e.g. #F3F3F3 becomes #F3F3F3FF
https://github.com/microsoft/vscode/blob/main/src/vs/workbench/common/theme.ts#L14

[sgarbesi]

I tried taking a crack at it this morning, but unfortunately, I'm unable to build the repo from the main branch.

sqlite3 is failing at the yarn installation process, so I really have no way of moving this along.

If someone is able to build the main branch and wants to give it a shot, do the following:

Update the code here: https://github.com/microsoft/vscode/blob/main/src/vs/workbench/common/theme.ts#L14

To This:

export function WORKBENCH_BACKGROUND(theme: IColorTheme): Color {
	switch (theme.type) {
		case ColorScheme.LIGHT:
			return Color.fromHex('#F3F3F3').transparent(1);
		case ColorScheme.HIGH_CONTRAST_LIGHT:
			return Color.fromHex('#FFFFFF').transparent(1);
		case ColorScheme.HIGH_CONTRAST_DARK:
			return Color.fromHex('#000000').transparent(1);
		default:
			return Color.fromHex('#252526').transparent(1);
	}
}

Install the Customize UI extension.

Change the user settings.json to this:

{
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.transparency": true,
    "workbench.colorCustomizations": {
        "editor.background": "#00000000",
        "sideBar.background": "#00000000"
    },
    "customizeUI.stylesheet": {
        ".monaco-workbench": "background: rgba(0, 0, 0, 0.7) !important;"
    },
    "customizeUI.titleBar": "inline",
    "window.titleBarStyle": "native",
}

[bpasero]

Setting back "info needed" label to get input if this PR is still being maintained and my concerns about having to use the Customize UI extension installed.

[aurexav]

Install the Customize UI extension.

Change the user settings.json to this:

{
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.transparency": true,
    "workbench.colorCustomizations": {
        "editor.background": "#00000000",
        "sideBar.background": "#00000000"
    },
    "customizeUI.stylesheet": {
        ".monaco-workbench": "background: rgba(0, 0, 0, 0.7) !important;"
    },
    "customizeUI.titleBar": "inline",
    "window.titleBarStyle": "native",
}

Do NOT use this. If you are in the latest version.

iocave/customize-ui#156

After I used the hack above, my vscode broke.
It can not startup now, and I have to reinstall it now.

[sgarbesi]

@bpasero I was finally able to get the project to build again this morning.

I tried the possible solutions I mentioned prior by adding transparent() to the hex values and had no success. I also tried modifying the theme file itself, with no success.

From experience, I would say that the values being assigned to the window frame need to have a hex value with the transparency of anything other than opaque, along with the window frame and transparent attributes (https://github.com/microsoft/vscode/pull/151678/files#diff-fbd7e23f066a8ec2fcf88c3a3dc8742649134505f0e6d8ca28ddb9f0f00d0fefR211) being assigned the proper values, it should work without having to bypass assigning the window color.

I don't feel confident that this was tested properly (trying to muck with the hex transparency values) on my end due to issues I'm unaware of in regard to the development process for this given project. If you look at the code diff for this PR, I literally removed the User preference functionality check and forced the project to always use the transparency functionality I wrote. It just didn't work. However, with those same code changes in place, if I checked off the User preference it would magically work again. Something somewhere is cached? I tried yarn cache clean, rebuilding, etc. and still, something just doesn't feel right. I would update theme colors and reload the project, sometimes it would take, and other times it would be stuck on its old value.

In regards to Setting back "info needed" label to get input if this PR is still being maintained and my concerns about having to use the Customize UI extension installed., the code change doesn't require Customize UI extension, the extension was just used to illustrate the functionality. Anyone could create their own theme and take advantage of the transparency without the need for an extension. The only benefit the extension provides is giving a User the ability to edit their favorite theme without actually modifying the theme files directly.

Unfortunately at this point, I've exhausted my own personal resources in an attempt to move this PR along. Someone more versed with the project that knows of all the quirks/gotcha's/etc. (which I described above) should probably take a look at this if you want more code changes/reviewing/testing/etc.

Feedback: It's +15 -2 diff with a lot of demand behind it. It's also a User Preference that someone needs to explicitly opt-in to use. The if statement that is firing on the window spawn to assign the backgroundColor should cost close to nothing performance-wise. Maybe throw it in the experimental section if there's that much concern. I personally don't see how it burdens the project by allowing Users the ability to change the window frame properties for transparency.

[mrariful786]

sgarbesi:sgarbesi/transparency

[agustinmouratoglouevolv]

Is this going to be released ? Excited

[vscodenpa]

Hey @bpasero, this issue might need further attention.

@sgarbesi, you can help us out by closing this issue if the problem no longer exists, or adding more information.

[vscodenpa]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!

[1-800-jono]

Can this be re-opened?

[ckissane]

recent activity!