electron title bar style

I would like to change the color of the titlebar for the windows version of my electron app. currently it is white, how do I change it to, for example, blue? 

 

 

 

answer: 

There's no way at the moment to customize the native titlebar. So, first step is to hide the native titlebar by telling your BrowserWindow to hide the frame (that would also hide the menubar).mainWindow = new BrowserWindow({ frame: false })

see: https://electronjs.org/docs/api/browser-window

BrowserWindow | Electron

 

Then, you should create your custom titlebar (or import a third party library like 1 or 2) in HTML, CSS and JS. That way, the titlebar lives under the renderer process in Electron. So, to actually for example quit your application when clicking the X button, you should take advantage of the IPC to send an event to the main process and quit the application.

 

 

Example:

# renderer ipcRenderer.send('app:quit') # main ipcMain.on('app:quit', () => { app.quit() })

Or as an alternative: look this answer here on StackOverflow