windowselectron

Electron: change titleBarOverlay.color and titleBarOverlay.symbolColor at runtime

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?

Solution

  • 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,
})