electron-titlebar-respect v1.1.2

Electron Titlebar Respect

When developing an Electron app with a custom titlebar, you have to keep mind other operating systems. With this NPM package, you can distrubed to all platforms in one go without having to change your code for each OS to fit the design of their desktop.

Electron Titlebar Respect will automatically set global variables depending on the operating system.

Usage

In your main process, add electron-titlebar-respect

const {TitlebarRespect} = require('electron-titlebar-respect')
TitlebarRespect({})

Then, assign global variables set by Electron Titlebar Respect to your window:

...
frame: global.frame,
titleBarStyle: global.titleBarStyle
...

Configuration

You can now set options for certain operating systems.

Example, setting the frame to false for Linux:

TitlebarRespect({
    frameLinux: false
})

• frameMac - Set frame for Mac. Default is false.
• tbsMac - Set the titlebar style for Mac. Default is true.
• frameWindows - Set frame for Windows. Default is false.
• tbsWindows - Set the titlebar style for Windows. Default is true.
• frameLinux - Set frame for Linux. Default is true.

Recommendation

To control the position of the traffic lights on macOS, add:

    ...
    trafficLightPosition: { x: 25, y: 25 }
    ...

To change the colors and height of the native titlebar buttons on Windows 10/11, add:

    ...
    titleBarOverlay: {
      color: '#191919', // Background
      symbolColor: 'white', // Icon,
      height: 40px
    }
    ...

Apps Using This

• Penpot Desktop
• SnailDOS Desktop