|
||
---|---|---|
README.md | ||
index.js | ||
package.json |
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 isfalse
.tbsMac
- Set the titlebar style for Mac. Default istrue
.frameWindows
- Set frame for Windows. Default isfalse
.tbsWindows
- Set the titlebar style for Windows. Default istrue
.frameLinux
- Set frame for Linux. Default istrue
.
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
}
...