Why is Win11 opacity significantly more than Win10?

[mkanet]

I noticed that even when opacity is set to 0 the opacity on Windows 11 PCs looks significantly more than Windows 10. Is there anyway around that?

[illixion]

Vibrancy just activates Electron's default transparency feature, which uses Windows Acrylic, and that has been updated to be brighter and more translucent in 11. I've seen people use MicaForEveryone to tweak the look of Vibrancy on Windows, but I haven't tried it, so I don't know how well it works. There are also some Electron window properties that may be able to increase transparency, will need to test them at some point, the code that adds those can be found here.

[mkanet]

Vibrancy just activates Electron's default transparency feature, which uses Windows Acrylic, and that has been updated to be brighter and more translucent in 11. I've seen people use MicaForEveryone to tweak the look of Vibrancy on Windows, but I haven't tried it, so I don't know how well it works. There are also some Electron window properties that may be able to increase transparency, will need to test them at some point, the code that adds those can be found here.

Thank you so much!! This was very helpful. Im going to see if I can add this myself as an experiment. However, I need just some help to make this work. Hopefully, most of the code is already done correctly below. I made comments in the places I've added/change code. Unfortunately, even though I change the settings, they don't actually make any noticeable changes.

I was able to expose many of these settings in the extensions's settings (see below code changes and respective screenshots).

My goal is to at least be able to change Blur from Mica to Acrylic on Windows 11 (without the need for MicaForEveryone) since I think Acryllic looks much nicer than Mica; at least for VSCode.

.
package.json (added 3 new items for configuration/contributes/properties)

				"vscode_vibrancy.frame": {
					"description": "Enable or disable frame.",
					"type": "boolean",
					"default": true
				},
				  "vscode_vibrancy.transparent": {
					"description": "Enable or disable transparency.",
					"type": "boolean",
					"default": true
				},
				"vscode_vibrancy.backgroundMaterial": {
					"description": "Set the window's system-drawn background material.",
					"type": "string",
					"default": "auto",
					"enum": ["auto", "none", "mica", "acrylic", "tabbed"]
				}

extension/index.js

// Add readSettings function here
function readSettings() {
  const config = vscode.workspace.getConfiguration("vscode_vibrancy");
  const frame = config.get("frame");
  const transparent = config.get("transparent");
  const backgroundMaterial = config.get("backgroundMaterial");  // Add this line
  return { frame, transparent, backgroundMaterial };  // Update this line
}

runtime/methods/interval.js

/**js
 * @type {{
*  os: string,
*  config: {
*    type:  "auto" | "acrylic" | "appearance-based" | "light" | "dark" | "titlebar" | "selection" | "menu" | "popover" | "sidebar" | "medium-light" | "ultra-dark",
*    opacity: number,
*    theme: "Default Dark" | "Dark (Only Subbar)" | "Default Light" | "Light (Only Subbar)" | "Tokyo Night Storm" | "Tokyo Night Storm (Outer)" | "Noir et blanc" | "Dark (Exclude Tab Line)" | "Solarized Dark+",
*    imports: string[],
*    refreshInterval: number,
*    preventFlash: boolean,
*    backgroundMaterial: string  // Add this line
*  },
*  themeCSS: string,
*  theme: any,
*  imports: {
*    css: string,
*    js: string
*  }
* }}
*/
const app = global.vscode_vibrancy_plugin;
let backgroundColorTimer;
module.exports = (window) => ({
   install() {
	   clearInterval(backgroundColorTimer);
	   backgroundColorTimer = setInterval(() => {
		   window.setBackgroundColor('#00000000');
		   window.setBackgroundMaterial(app.config.backgroundMaterial);  // Add this line
	   }, app.config.refreshInterval);
   },
   uninstall() {
	   clearInterval(backgroundColorTimer);
   }
});

native/vibrancy.cc
https://pastebin.com/Txh04xm0

Screenshot:

[mkanet]

Hi @illixion have you had a chance to take a look at this? I think I have pretty much ALL the code complete. However, it looks like I have something missing. I am hoping I could convince you to take a look at the code I posted. You are welcome to include these new features in Vibrancy-Continued.

Thank you in advance for your help!
MKANET

[illixion]

I haven't had any time to work on this extension during the last month or so, so I haven't looked into it yet, but I might have a bit more time next week. If you figure out what's missing on your own though, please feel free to submit a PR and I'll definitely merge it.

[mkanet]

@illixion thank you so much! I'm very excited. The main reason why I didn't submit a PR is because I have very little experience with Javascript, especially C++. However, I think most of the code I shared here is needed for this to work.

Thanks again!

[mkanet]

@illixion I'm guessing you didn't have time to do it this week? Do you think you will be able to do it next week? I'm really looking forward to it!

[illixion]

I'm not actually having any luck adjusting the background material, did this work for you? I'm wondering if there's a bug with Electron that prevents it from working in VSCode. So far I've tried adding backgroundMaterial to /vs/code/electron-main/main.js, as well as window.setBackgroundMaterial(); to runtime\index.js and runtime\methods\overwrite.js with mica/acrylic/none, and I didn't see any visible changes between them.

[mkanet]

Thank you for trying. I am just a novice in Javascript. Just out of curiosity, was the code I provided even correct? Is there a chance maybe you didn't do it correctly or there is still missing code that is necessary? ..or, is all the code correct, but it is just not working?

It looks like Mica and Acrylic material background was already successfully added to Electron already.