web-dev-qa-db-fra.com

définir la couleur de la barre de titre de windows - electron.js

Je voudrais changer la couleur de la barre de titre pour la version Windows de mon application électronique. actuellement, il est blanc, comment puis-je le changer en bleu par exemple? enter image description here

javascripthtmlcsswindowselectron
13
Daniel

Il n'y a aucun moyen pour le moment de personnaliser la barre de titre native. La première étape consiste donc à masquer la barre de titre native en disant à votre BrowserWindow de masquer le cadre (ce qui masquerait également la barre de menus).

mainWindow = new BrowserWindow({
    frame: false
})

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

Ensuite, vous devez créer votre barre de titre personnalisée (ou importer une bibliothèque tierce comme 1 ou 2 ) en HTML, CSS et JS. De cette façon, la barre de titre vit sous le processus de rendu dans Electron. Ainsi, pour quitter par exemple votre application lorsque vous cliquez sur le bouton X, vous devez tirer parti de IPC pour envoyer un événement au processus principal et quitter l'application.

Exemple:

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

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

Ou comme alternative: regardez cette réponse ici sur StackOverflow

10
lucgenti

Vous devez masquer la barre de titre de la fenêtre et créer une nouvelle barre de titre de fenêtre en html, css, js ..

1
DeepRobin

Il existe une API pour cela. Je ne l'ai pas encore essayé. https://www.npmjs.com/package/electron-titlebar-windows

const titlebar = new ElectronTitlebarWindows(#24628d);

quelque chose comme ca...

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

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

0
Lucas Lima