Electron Projects

Using the customButtonsOnHover titleBarStyle

Last but not least, we have the customButtonsOnHover value, which you can exclusively use with the titleBarStyle property for macOS and only when running in frameless mode:

function createWindow() {  win = new BrowserWindow({    titleBarStyle: 'customButtonsOnHover',    frame: false  });  win.loadURL(`http://localhost:3000`);  win.on('closed', () => {    win = null;  });}

This option is very nice and convenient when you want your custom window to look completely non-standard. The window control buttons, also known as traffic light buttons, stay hidden by default, but your users can still get them by moving their mouse cursor over the top left corner. Let's see how that works:

1. Restart or launch your application ...