Electron运行时修改titleBarOverlay.color与symbolColor的实现方法问询

完全不需要关闭重建窗口，Electron v15及以上版本已经提供了BrowserWindow实例方法setTitleBarOverlay，可以动态更新标题栏覆盖层的配置，修改后即时生效，不会出现窗口闪烁、需要恢复状态的问题。

实现步骤 #

1. 首先在主进程全局保存你创建的窗口实例，不要仅限制在createWindow函数的局部作用域内：

// 主进程代码
let mainWindow = null

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: 'hidden',
    titleBarOverlay: {
      color: '#6a7b8d',
      symbolColor: '#eee'
    },
    // 其余原有配置
  })
  // 其余窗口初始化逻辑
}

2. 触发主题切换时直接调用实例方法更新配置即可，如果是渲染层触发的主题切换，可以通过IPC通知主进程执行更新：

// 渲染进程代码：切换主题时发送通知
ipcRenderer.send('update-title-bar-theme', {
  color: '#2d3748',
  symbolColor: '#f7fafc'
})

// 主进程代码：监听更新事件修改配置
ipcMain.on('update-title-bar-theme', (_, newConfig) => {
  if (!mainWindow?.isDestroyed()) {
    mainWindow.setTitleBarOverlay(newConfig)
  }
})

注意事项 #

• 该特性仅支持Windows和macOS平台，Linux环境下调用该方法会被自动忽略，不会抛出异常，无需额外做平台兼容判断。
• 除了color和symbolColor之外，你还可以传入可选的height参数动态调整标题栏的高度。

内容的提问来源于stack exchange，提问作者mastazi