electron: BrowserWindow vibrancy is lost after reload

Electron version: 1.4.13 (currently the latest)
Operating system: OS X El Capitan (10.11.4)

Expected behavior

When the web page reloads the vibrancy set on the BrowserWindow should remain active.

Actual behavior

When the web page reloads (either using [Cmd+R], or in my case, due to Create React App) the vibrancy which was active prior to the reload is lost.

How to reproduce

If you use the sample code on the Quick Start page, and replace the BrowserWindow creation code with the following…

// ...

win = new BrowserWindow({
  width: 800,
  height: 600,
  vibrancy: 'light'
});

// ...

Then load up the app and press [Cmd+R] on your keyboard. The vibrancy is lost, and the page background goes back to white (web page default).

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 15
Comments: 17 (5 by maintainers)

Most upvoted comments

Hey folks,

I managed to get a workaround going for this on Electron 5.0.0 since I’m working on something that needs the vibrancy, too. I’ve discovered that, after fiddling around with settings, you need both the transparency and background color:

        vibrancy: systemPreferences.isDarkMode()? "ultra-dark": "light",
        transparent: true,
        backgroundColor: "#80FFFFFF"

I also had to add some extra checks to make sure that this only happens in macOS and nowhere else to prevent possible transparency issues with Windows/Linux.

+14

alicerunsonfedora on May 17, 2019

I can’t get the transparent: true workaround to fix this either on the latest Electron.

wilg on Mar 29, 2019

@kevinsawicki sure, will take a look tomorrow.

gerhardberger on Jan 5, 2017

@sofianguy can you please reopen? It seems it worked for v3, but broke in v4 and up.

marcj on Feb 23, 2019