Translucent sidebars in Electron apps

macOS Tahoe introduced slight translucency for app sidebars, and you can also add this effect to an Electron BrowserWindow using the vibrancy property:

new BrowserWindow({
  width: 1100,
  height: 720,
  titleBarStyle: "hiddenInset",
  vibrancy: "sidebar",
});

Here’s a comparison: on the left is The Finances App sidebar with no transparency, and on the right, with vibrancy: "sidebar":

vibrancy accepts the following values:

• titlebar
• selection
• menu
• popover
• sidebar
• header
• sheet
• window
• hud
• fullscreen-ui
• tooltip
• content
• under-window
• under-page

My helpful mate Claude whipped up a demo to compare all these different values. Popovers are more translucent than sidebars, for example:

You can read more in the official Apple developer docs on NSVisualEffectView.

Enjoy!