change color of title bar

To change the color of the title bar in Electron, you can use the BrowserWindow API and set the titleBarStyle option to hiddenInset or customButtonsOnHover depending on your preference.

Here's an example:

const { app, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    title: 'My App',
    width: 800,
    height: 600,
    frame: false,
    titleBarStyle: 'hiddenInset', // or 'customButtonsOnHover'
    backgroundColor: '#333' // set a background color for the window
  })

  mainWindow.loadFile('index.html')
})

In this example, we create a new BrowserWindow instance and set the titleBarStyle option to hiddenInset which will hide the default title bar and allow you to create a custom one. You can then use CSS to style the custom title bar and set its background color.

Here's an example CSS:

.title-bar {
  -webkit-app-region: drag;
  height: 32px;
  background-color: #0078d7;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 8px;
}

In this example, we create a .title-bar class and set its background color to #0078d7 and its font color to #fff. We also set the font size and weight and add some padding to make it look nice. Finally, we use -webkit-app-region: drag to allow the user to drag the window by clicking and dragging on the title bar.