Skip to content

Instantly share code, notes, and snippets.

Last active Jan 22, 2021
What would you like to do?
Electron Vibrancy Example
<!DOCTYPE html>
<meta charset="utf-8">
<title>Vibrancy Example</title>
* {
color: rgba(100, 100, 100, 0.9);
h1 {
color: rgba(0, 0, 0, 0.9);
<h1>Vibrancy Example</h1>
<p>You can specify the vibrancy by either passing a <code>vibrancy</code> option to <code>new BrowserWindow(options)</code>
or by calling <code>BrowserWindow.setVibrancy(vibrancyType)</code>.
<p><b>Vibrancy Type</b></p>
<input type="radio" name="vibrancy" onclick="require('electron').remote.getCurrentWindow().setVibrancy()" checked>None<br>
<input type="radio" name="vibrancy" onclick="require('electron').remote.getCurrentWindow().setVibrancy('light')">Light<br>
<input type="radio" name="vibrancy" onclick="require('electron').remote.getCurrentWindow().setVibrancy('medium-light')">Medium Light<br>
<input type="radio" name="vibrancy" onclick="require('electron').remote.getCurrentWindow().setVibrancy('dark')">Dark<br>
<input type="radio" name="vibrancy" onclick="require('electron').remote.getCurrentWindow().setVibrancy('ultra-dark')">Ultra Dark<br>
const {app, BrowserWindow} = require('electron')
let window
app.on('ready', () => {
window = new BrowserWindow()
Copy link

magicdawn commented Jan 10, 2020

window = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,

tip: nodeIntegration should be specified

Copy link

NetOpWibby commented Feb 4, 2020

Note that appearance-based, light, dark, medium-light, and ultra-dark have been deprecated and will be removed in an upcoming version of macOS.

Copy link

dhamberlin commented Jan 22, 2021

BrowserWindow needs these options for this example to work as of electron 11.2.0 and macos Catalina:

window = new BrowserWindow({
  transparent: true,
  webPreferences: {
    enableRemoteModule: true,
    nodeIntegration: true

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment