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

Question

I would like to change the color of the titlebar for the windows version of my electron app. currently it is white, how do I change it to, for example, blue?

Answer 1

There's no way at the moment to customize the native titlebar. So, first step is to hide the native titlebar by telling your BrowserWindow to hide the frame (that would also hide the menubar).

mainWindow = new BrowserWindow({
    frame: false
})

see: https://electronjs.org/docs/api/browser-window

Then, you should create your custom titlebar (or import a third party library like 1 or 2 ) in HTML, CSS and JS. That way, the titlebar lives under the renderer process in Electron. So, to actually for example quit your application when clicking the X button, you should take advantage of the IPC to send an event to the main process and quit the application.

Example:

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

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

Or as an alternative: look this answer here on StackOverflow

Answer 2

actually now there is a way
take a look here , a lot of electron apps use it so I think is a win win...
just make sure to install this first

npm i custom-electron-titlebar

Answer 3

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

Answer 4

There is an API for it. Haven't tried it yet. https://www.npmjs.com/package/electron-titlebar-windows

const titlebar = new ElectronTitlebarWindows(#24628d);

something like that...

Answer 5

你可能想看看这篇文章

Answer 6

Now can hide the title bar and set the color of buttons in Windows with:

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

see Docs for more informations.

Answer 7

Here is the Answer:-

// Create the browser window.
const mainWindow = new BrowserWindow({
    titleBarStyle: 'hidden',
    titleBarOverlay: {
        // color of titile bar
        color: '#3b3b3b',
        // color of titile bar control
        symbolColor: '#74b1be',
        // height of titile bar
        height: 32
    },
});

Refence: Electron Docs

Answer 8

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

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