electron feat: support Mica/Acrylic on Windows

Description of Change

Supersedes https://github.com/electron/electron/pull/30298.

Closes https://github.com/electron/electron/issues/16391. Closes https://github.com/electron/electron/issues/29937.

Adds support for background material effects on Windows with win.setBackgroundMaterial(material).

Checklist

[x] PR description included and stakeholders cc'd
[x] npm test passes
[x] relevant documentation, tutorials, templates and examples are changed or added
[x] PR release notes describe the change in a way relevant to app developers, and are capitalized, punctuated, and past tense.

Release Notes

Notes: Add support for Mica and Acrylic background effects on Windows.

May 03 '23 10:05 codebytere

I can't believe you did this in like 30 LoC, this is so much simpler than I thought it would have been.

May 04 '23 00:05 felixrieseberg

Release Notes Persisted

Add support for Mica and Acrylic background effects on Windows.

May 15 '23 20:05 release-clerk[bot]

I was unable to backport this PR to "24-x-y" cleanly; you will need to perform this backport manually.

May 15 '23 20:05 trop[bot]

I was unable to backport this PR to "25-x-y" cleanly; you will need to perform this backport manually.

May 15 '23 20:05 trop[bot]

@codebytere has manually backported this PR to "25-x-y", please check out #38357

May 17 '23 18:05 trop[bot]

@codebytere has manually backported this PR to "24-x-y", please check out #38361

May 17 '23 18:05 trop[bot]

@codebytere Is this the intended behavior? The effect only applies to the title bar?

May 28 '23 17:05 michalzaq12

Interesting, with Glasstron this was a bug, not sure if that is suppose to happen.

May 28 '23 23:05 SudoVanilla

~~For vibrancy on macos you need to have no background color in the div. Maybe double check that your div is transparent?~~ Nope, I get the above as well.

May 28 '23 23:05 kochie

So sorry for all you that are suscribed but this is SO cool! I'm surprised how little lines it takes to do something like this

May 30 '23 19:05 ghost

@codebytere Is this the intended behavior? The effect only applies to the title bar?

Having the same issue. Is this expected? Is it possible to apply also Mica to the web content background?

Jun 06 '23 21:06 blueset

Have you tried with background: none;, background-color: none;, background: transparent;, background-color: transparent; (to <body>)?

Jun 06 '23 21:06 ghost

@aitor-gomila: Have you tried with background: none;, background-color: none;, background: transparent;, background-color: transparent; (to <body>)?

Yes, I’ve tried all 4 combinations on both <body> and <html>, and it still produces the same result.

Here’s my Electron Fiddle code to repro this: https://gist.github.com/blueset/b406e2d1bd9218a16b599e72a3ee82c7

Jun 06 '23 22:06 blueset

@blueset @michalzaq12 I had the same issue, but it worked when I added transparent: true to the BrowserWindow constructor options. Using electron 25.1.0

Jun 08 '23 20:06 oliverschwendener

@oliverschwendener I had the same issue, but it worked when I added transparent: true to the BrowserWindow constructor options. Using electron 25.1.0

Setting transparent: true partially solves the problem, but the window would become unresizable. See #38454.

Jun 09 '23 15:06 blueset

I confirm, same problem.

Jun 19 '23 18:06 gaetandezeiraud

I confirm, same problem.

just bump into the same issue. Confirmed on Win11

Oct 24 '23 21:10 JerryI

bump, also happening to me

Jan 27 '24 09:01 tiagozip

The window becomes clear

Jul 04 '24 06:07 YeesterPlus