设置windows标题栏的颜色 - electron.js

Question

我想改变我的电子应用程序的Windows版本的标题栏的颜色.目前它是白色的,如何将其更改为例如蓝色？

Answer 1

目前无法自定义原生标题栏.因此,第一步是通过告诉您的BrowserWindow隐藏框架来隐藏原生标题栏(这也会隐藏菜单栏).

mainWindow = new BrowserWindow({
    frame: false
})

请参阅:https://electronjs.org/docs/api/browser-window

然后,您应该在HTML,CSS和JS中创建自定义标题栏(或导入第三方库,如1或2).这样,标题栏就存在于Electron的渲染器过程中.因此,实际上例如在单击X按钮时退出应用程序时,您应该利用IPC将事件发送到主进程并退出应用程序.

例:

# renderer
ipcRenderer.send('app:quit')

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

或者作为替代方案:在StackOverflow上查看此答案

Answer 2

实际上现在有一种方法
可以看看这里，很多电子应用程序都使用它，所以我认为这是一个胜利......
只要确保先安装它

npm i custom-electron-titlebar

Answer 3

现在可以隐藏标题栏并设置 Windows 中按钮的颜色：

//main.js
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    color: '#2f3241',
    symbolColor: '#74b1be'
  }
})

请参阅文档以获取更多信息。