设置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() })

或者作为替代方案：look this answer here on StackOverflow

Answer 2

实际上现在有一种方法
看一下here，很多电子应用程序都在使用它，所以我认为这是双赢的局面。
只需确保先安装此

npm i custom-electron-titlebar

Answer 3

你必须隐藏窗口标题栏并在html，css，js中构建一个新的窗口标题栏。

Answer 4

有一个API。还没有尝试过。 https://www.npmjs.com/package/electron-titlebar-windows

const titlebar = new ElectronTitlebarWindows(#24628d);

类似的东西...

Answer 5

mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    titleBarStyle: "hiddenInset"
})

https://electronjs.org/docs/api/frameless-window