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

Posted 2023-03-22

【中文标题】设置窗口标题栏的颜色 - electron.js

【英文标题】：set color of windows titlebar - electron.js

【发布时间】：2018-02-23 14:39:46

【问题描述】：

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

【问题讨论】：

你找到方法了吗？

【参考方案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 ***

【参考方案2】：

其实现在有办法 看看here，很多电子应用程序都在使用它，所以我认为是双赢... 只要确保先安装这个

npm i custom-electron-titlebar

【讨论】：

它没有过时。您链接了一个包。它不会使其成为自定义标题栏的官方方式，也不会与操作系统原生集成：github.com/AlexTorresSk/custom-electron-titlebar/blob/…

【参考方案3】：

你必须隐藏窗口标题栏并在html,css,js中建立一个新的窗口标题栏..

【参考方案4】：

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

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