How to make a semi-transparent app background with electron?
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