CODEWITHSUNDEEP
javascriptelectrontransparent
Inigo Mantoya
Inigo Mantoya

Reputation: 671

How to make a semi-transparent app background with electron?

I'm quite new to Electron and am wondering how i can create the effect where parts of an application are partially transparent, and show a blurred image of the applications below them.
This screenshot of Canary, an email app is a good example of what I mean. screenshot of Canary, a mail app. Notice the semi-transparent blurred background of the sidebar

(I edited out my emails in preview)

How would I go about creating an effect similar to this in Electron? Specifically, how would I make a <div> element show a blurred version of the applications below it? Is this even possible with Electron?

Thank you for your help in advance.

Upvotes: 9

Views: 10147

Answers (2)

Chetan
Chetan

Reputation: 5085

you can use a function on window setOpacity(number) where number can be as per your preference.

Upvotes: 1

tonyduanesmith
tonyduanesmith

Reputation: 121

When setting up the browser window in your main.js file, set the vibrancy option to one of electrons options.

A snippet from electrons documents below

"vibrancy String (optional) - Add a type of vibrancy effect to the window, only on macOS. 
Can be appearance-based, light, dark, titlebar, selection, menu, popover, sidebar, medium-light or ultra-dark."

https://github.com/arkenthera/electron-vibrancy/blob/master/README.md

example js code if using the ultra-dark theme

let mainWindow;

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    vibrancy: 'ultra-dark',
  });
};

After setting up the main window's background with the vibrancy set then simply split the window up with a sidebar and the main content. Setting the background color of main to any color you wish leaving the sidebar still with its OSX style transparency

I hope this helps

Upvotes: 8

Related Questions