Electron, VSCode & Mica Materials

[WildByDesign]

@illixion I apologize for tagging you directly, but I feel like you would be in the best position to know. My experience with Electron is minimal and same with JavaScript in general.

If you have a moment, could you please with help my understanding of a few things?

window.setBackgroundColor('#00000000')

When it comes to making the Electron window of VSCode transparent (or black) so that it can accept materials like Mica and Acrylic, is the code (above) generally the "secret sauce" for doing that?

If Yes, is there any method that I can use to inject that line of code without using your extension or without using a compiled .NODE binary?

For example, would the Custom UI Style vscode extension allow for injecting this line where it needs to be?

The reason why I ask is because my own project Immersive UX currently requires users to install your extension and from there, my app applies any of the materials or blur to VSCode/VSCodium. My method is different since mine requires the native titlebar so our end goals are quite different.

From my understanding, my app only works with your extension because your extension is what allows for "punching through" the Electron layers so that backdrop materials can be seen through the Electron BrowserWindow. And that, I assume, is the window.setBackgroundColor('#00000000') line setting the alpha value.

I just don't know how far I should go down this rabbit hole if it's not possible for me to achieve. So that is what I am hoping that you can clarify for me.

If you can help me to understand this better, I would really appreciate it. Thank you for your time.

[WildByDesign]

Also, I forgot to ask. Do you know of any way to change the color of the menubar in VSCode?

It's color #1f1f1f RGB (31, 31, 31) always on Windows and I haven't figured out a way to change it. I would like to change it to #00000000 as well to take advantage of alpha if possible.

[illixion]

No worries, I'd be happy to explain what I know, though I didn't create the original Vibrancy project and as such my Electron knowledge is limited.

window.setBackgroundColor('#00000000')

This line is indeed what sets the background to be semitransparent, you can see here how VSCode initially makes the window opaque here: https://github.com/microsoft/vscode/blob/9f8431f7fccf7a048531043eb6b6d24819482781/src/vs/platform/theme/electron-main/themeMainService.ts#L80

Although you might also need to call window.setBackgroundMaterial or bindings.setVibrancy from the native module to specify what kind of material should be used for the transparency.

We also have these scripts that help with fixing this value on window resize, overwrite being least CPU demanding: https://github.com/illixion/vscode-vibrancy-continued/tree/main/runtime-pre-esm/methods

If Yes, is there any method that I can use to inject that line of code without using your extension...

You can replicate what Vibrancy Continued does and patch the workbench HTML and Electron JS files, though it's worth noting that you'll also have to deal with a variety of possible issues due to other extensions potentially also doing the same thing, as well as VSCode's integrity checks and CSP. You could also fork Vibrancy Continued and use it as a foundation for your own project, it is MIT licensed after all. If there's something that you'd like to see changed, you can also open a PR.

or without using a compiled .NODE binary?

I'm unsure on how necessary the current native modules still are, given that window.setBackgroundMaterial functions similarly to the current bindings.setVibrancy implementation, minus the issues with the randomly appearing title bar. The other native module win10refresh is meant to fix window movement and resizing to prevent lag on Windows 10, some people said it helps them, but not sure if everyone needs it. macOS requires no native modules.

Also, I forgot to ask. Do you know of any way to change the color of the menubar in VSCode?

I'm not 100% sure, but from what I've read the color of this bar is system-controlled and isn't something that Electron can style, and VSCode on Windows has a custom implementation of it.

[WildByDesign]

No worries, I'd be happy to explain what I know, though I didn't create the original Vibrancy project and as such my Electron knowledge is limited.

You are very gracious with your time and I am thankful.

I'm unsure on how necessary the current native modules still are, given that window.setBackgroundMaterial functions similarly to the current bindings.setVibrancy implementation, minus the issues with the randomly appearing title bar.

Alright so I just looked over the vibrancy.cc module and the only thing that it does is runs the SetWindowCompositionAttribute call to enable/disable the acrylic blur on Windows. This is something that I am familiar with because I use that function in my project. Everything else seems to be done outside of that. With the newer window.setBackgroundMaterial, you probably wont even need that native module anymore since that will do Acrylic plus Mica and Tabbed.

So it seems that window.setBackgroundColor('#00000000'), bindings.setVibrancy and window.setBackgroundMaterial are not run within the modules which is a good thing.

I'm not 100% sure, but from what I've read the color of this bar is system-controlled and isn't something that Electron can style, and VSCode on Windows has a custom implementation of it.

I think you are right about this. It seems to be system-wide at least on Windows.

[WildByDesign]

I did what you suggested and forked Vibrancy Continued (locally). I'm just trying to get an understanding of how every single part of this works because chopping everything apart, breaking it, etc. is always my favorite way to learn.

Anyway, so far I have the entire thing working with only the following:

└───vscode-vibrancy-runtime-v6
    │   index.cjs
    │
    └───methods
            index.cjs
            interval.cjs
            overwrite.cjs

Outside of that, there is of course still the workbench.html file and things like that. But I'm trying to see how far I can slim things down to only the main functionality.