I have an Electron app that opens a window like this:
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#6a7b8d',
symbolColor: '#eee'
},
//...etc
})
By passing titleBarOverlay.color
and titleBarOverlay.symbolColor
to the constructor, I'm able to change the style of the minimize/maximize/close buttons when the app is open in Windows.
Now the problem comes due to the fact that I'm planning to have themes. When the user changes themes, how can I change the color
and symbolColor
without having to restart the app completely?
I was thinking that I could save the state, close the window and reopen a new one. Is there a less complicated way though?
I finally figured it out. A setTitleBarOverlay
method was added here that you can use to update the symbol color.
mainWindow.setTitleBarOverlay({
color: "rgba(0, 0, 0, 0)",
symbolColor: "#000000", // symbol color here
height: 30,
})