Electron custom window

Electron title bar hiding and customization

Electron applies a custom title bar style

Title bar styles allow hiding most of the browser window's color while leaving the system's native window controls intact, and can be configured BrowserWindowusing the option in the constructor of titleBarStyle.

The result of applying the hidden title bar style is to hide the title bar and the full-sized content window.

const {
    
     BrowserWindow } = require('electron')
const win = new BrowserWindow({
    
     titleBarStyle: 'hidden' })

window control overlay

The Window Controls Overlay API is a web standard that enables web applications to customize their title bar area when installed to the desktop. BrowserWindowElectron exposes this API via constructor options titleBarOverlay.

titlebarStyleThis option is only available when applying customizations on macOS or Windows. When enabled titleBarOverlay, window controls are exposed in their default positions, and the area below this area cannot be used by DOM elements.

This titleBarOverlayoption accepts two different value formats.

Specifying true on either platform will cause the overlay to have the default system colors:

// on macOS or Windows
const {
    
     BrowserWindow } = require('electron')
const win = new BrowserWindow({
    
    
  titleBarStyle: 'hidden',
  titleBarOverlay: true
})

titleBarOverlayCan also be an object on either platform . On macOS and Windows, the height of the overlay can be specified using the property height. On Windows, the color of the overlay and its symbol can be specified using colorthe and symbolColorproperties, respectively.

If no color option is specified, the color will default to the system color of the window control buttons. Likewise, if no height option is specified, it will default to the default height:

// on Windows
const {
    
     BrowserWindow } = require('electron')
const win = new BrowserWindow({
    
    
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    
    
    color: '#2f3241',
    symbolColor: '#74b1be',
    height: 60
  }
})

Create transparent windows

By setting the transparent option to true, you can create a completely transparent window.

const {
    
     BrowserWindow } = require('electron')
const win = new BrowserWindow({
    
     transparent: true })

---

Keywords:
Electron custom window, Electron title bar hiding, Electron title bar control enlargement, Electron close button enlargement, Electron hiding taskbar