Search code examples
javascriptnode.jsmacoselectronuivibrancyeffect

Why Electron Vibrancy Effect Not Working At All

This problem is so confusing because i don't know where the issue is.

I used vibrancy in my last project with previous electron versions in same machine and those were work properly but know it does not work, and i don't have any idea what is the problem.

I google it and i did not find any question or github issue.

May be the problem is in electron?!!

Here some information that may needed:

  • System:
    • MacOS 11.6 x86_64
  • Electron Version: 15.0.0
  • Other Dependencies or DevDependencies: Nothing

This is very simple example, and nothing crazy is going on. very very simple:

// File: index.js
// Process: Main
// Location: Root Directory Of Project
// -----------------------------------
const { app, BrowserWindow } = require('electron');
const { join } = require('path');

const isDarwin = process.platform === 'darwin';
let mainWindow;

app.setName('Electron Sample');

const Ready = () => {
  mainWindow = new BrowserWindow({
    show: false,
    vibrancy: 'content',
    visualEffectState: 'followWindow',
    title: app.getName(),
    backgroundColor: false,
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      nativeWindowOpen: false
    }
  });

  mainWindow.loadFile(join(__dirname, './index.html'));

  mainWindow
    .once('ready-to-show', () => mainWindow.show())
    .once('close', () => (mainWindow = null));
};

app.whenReady().then(Ready);

app.on('window-all-closed', () => {
  if (!isDarwin) app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) Ready();
});

<!--
 File: index.html
 Process: Renderer
 Location: Root Directory Of Project
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        background-color: transparent;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <h1>I Confused! 😭</h1>
  </body>
</html>

Project Structure:

  • node_modules
  • index.js
  • index.html
  • yarn.lock
  • package.json

This is all information.

Solution

  • The problem is in BrowserWindow Options

    This is the correct form of options to enable under-window vibrancy on macOS:

    new BrowserWindow({
 // Other Options...
 transparency: true,
 backgroundColor: "#00000000" // transparent hexadecimal or anything with transparency,
 vibrancy: "under-window", // in my case...
 visualEffectState: "followWindow"
})

    more info: Electron BrowserWindow Options