Windows 10 Fluent Design / Acrylic material

[marcinciarka]

Is there any chance that electron can get window background transparency with blur just like macOS vibrancy?

Fall Creators update gave us the acrylic material ability.

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[marcinciarka]

Recommend use the electron-vibrancy.

Well, it's fine but:

• it's not utilizing the build in mechanism
• it's not compatible with the newest version of electron

[codebytere]

I'd recommend opening a PR to https://github.com/arkenthera/electron-vibrancy or posting an issue there, as this is most likely best done on the client-side for this case.

[marcinciarka]

most likely best done on the client-side for this case.

@codebytere: Electron has built-in support for macos vibrancy, why it can't support windows acrylic material out of the box?

[DRSDavidSoft]

@dreszczyk Someone actually made a windows acrylic module for electron! https://github.com/23phy/electron-acrylic

It's still in beta phase but I'm sure @23phy will complete it. Hopefully, at some point, this will get merged into the main electron builds, with a unified API just like macOS vibrancy.

[23phy]

I see only one problem here, the function SetWindowCompositionAttribute that I am using, which doesn't have such a great documentation, it can be changed anytime, and it's probably hard to maintain.

[DRSDavidSoft]

@23phy I see, but that API has been available for quite some time. If Microsoft decides to drop or change it, a fallback in Electron can be used – simply no acrylic effect.

Other programs (like Glass8 for instance) use the same undocumented call to enable Aero/Acrylic effect. It may fail to work if MS change it, but it isn't going to break the app, just the acrylic effect won't work.

I suggest this should be merged into Electron-Vibrancy or the Electron itself. There are quite a lot of projects that need this functionality and by deploying as an experimental feature, it can be tested out by beta users.

[23phy]

I'll see what I can do, gonna dive into the guts of electron 😂 and make a PR. In the meantime, whoever needs that effect, can use the module.

[DRSDavidSoft]

@23phy That's awesome. BTW I suggested merging Vibrancy module with this, to get a unified endpoint call. e.g. set the transparent and acrylic/vibrancy once in the Electron app codebase, and get the same effect on macOS and Windows at the same time.

Don't know if it's easy/possible or not, but that'd be cool.

[23phy]

Vibrancy on macOS should have it's own option, because it has some parameters on how it should render the background. So instead of transparent: 'acrylic | vibrancy', should be two options:

• vibrancy: 'light | dark | titlebar | selection | menu | and so on'
• OR
• acrylic: tint tint as hexadecimal eg: 0x800020 or as a string

Where vibrancy will be available only on macOS, and acrylic on Windows, and it's definitely possible, but let's just stick with what we have for now, maybe in the future.

[DRSDavidSoft]

I like the idea of having two separate packages, though it should be possible to set them at the same time (or query the platform before setting eac of them if available.) with the application client itself.

[23phy]

I don't quite understand 🤔

El dom., 20 de may. de 2018 19:59, David Refoua notifications@github.com escribió:

I like the idea of having two separate packages, though it should be possible to set them at the same time (or query the platform before setting eac of them if available.) with the application client itself.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/electron/electron/issues/11771#issuecomment-390495966, or mute the thread https://github.com/notifications/unsubscribe-auth/ALOp0IuhhAce863PwiPqhWF-fze5Mi0iks5t0aDzgaJpZM4Ryzrs .

[rendomnet]

Is this feature planned?

[AmirAsghary]

+1 we need this