Last but not least, we have the customButtonsOnHover value, which you can exclusively use with the titleBarStyle property for macOS and only when running in frameless mode:

function createWindow() {
  win = new BrowserWindow({
    titleBarStyle: 'customButtonsOnHover',
    frame: false
  });

  win.loadURL(`http://localhost:3000`);

  win.on('closed', () => {
    win = null;
  });
}

This option is very nice and convenient when you want your custom window to look completely non-standard. The window control buttons, also known as traffic light buttons, stay hidden by default, but your users can still get them by moving their mouse cursor over the top left corner. Let's see how that works:

1. Restart or launch your application one more time and pay attention to where the buttons should be:

2. The buttons are invisible by default. Now, move the mouse cursor over that region and see what happens:

The next important thing we need to look at is transparent windows.