Add this to electron, itself 😄

TylerLeonhardt commented 6 years ago

Just like electron has the vibrancy option for macOS, it should also have an acrylic option for Windows. This would be easier in making more fluent-enabled apps using electron.

A really cool use-case is in Hyper. You can make extensions for hyper which are simply glorified node modules.

Example from the verminal theme where it sets vibrancy!: https://github.com/defringe/verminal/blob/master/index.js#L2

This could be setAcrylic 😎

You could make the argument that verminal could already use electron-acrylic, but it would require them to have all the dev requirements like python, and the C++ compiler. That's quite extensive for a theme for a terminal.

Having electron-acrylic as a part of electron gives it that 1st class experience!

23phy commented 6 years ago

Yes indeed it would be, I would love that too. But, the module is using an undocumented API, which Microsoft could change anytime. I forked the electron repo, and I'm working on it, will make a PR, for the experimental branch at least.

TylerLeonhardt commented 6 years ago

Can't wait! It's gonna look so good 😎 thanks for all your hard work!

iamapig120 commented 5 years ago

I have the same feature requirements

Sourtoast commented 5 years ago

Is it possible to add feature where you can enable acrylic via css? backdrop-filter: blur(Npx) would be awesome to see working as a “blur behind”

23phy commented 5 years ago

That's not possible unfortunately, you don't have access to the pixels under the window in CSS, but only the pixels in that window. This repo and electron-vibrancy, for example, on Windows, uses the undocumented function setWindowCompositionAttribute() to enable composition using DWM (Desktop Window Manager).

If you look at caniuse.com the Chrome version that supports backdrop-filter is 76-78, electron@beta, electron-nightly uses 76-77. Now if you create with those a frameless and transparent window with the following code:

const { app, BrowserWindow } = require('electron')

let win;
function createWindow() {
  win = new BrowserWindow({
    frame: false,
    backgroundColor: '#00000000',    // or transparent: true,
    webPreferences: {
      experimentalFeatures: true
    }
  })
  win.loadFile('index.html')
}

app.on('ready', createWindow)

and with the HTML

<head>
  <style>
    html, body {
      background: transparent !important;
    }

    #cover {
      width: 30%; height: 100%;
      position: absolute;
      left: 0; top: 0;
      background: rgba(0, 0, 0, .2);
      backdrop-filter: blur(5px)
    }
  </style>
</head>
<body>
  <!-- Lorem here -->
  <div id="cover"></div>
</body>
</html>

You will get the following:

Yes, the backdrop-filter works, it blures what's beneath the element, but the background is black.

Sourtoast commented 5 years ago

Yeah I'm aware of this, I was hoping for a way to control which area of window uses acrylic material. I'm trying to make an app to look like this

23phy commented 5 years ago

You could also make the whole window acrylic, and hide the parts of the window you want with CSS and HTML.

23phy / ewc

Add this to electron, itself 😄 #2