I am completely new to Electron and Node.js, so please forgive me if I misuse any terminology.
Currently, I am developing a Windows 10 application and I would like to customize the title bar area of my app similar to other Electron applications such as Github Desktop or Discord.
After doing some research, I have come across two methods to achieve this: one is to create a frameless window and manually design all the elements including the window control buttons, and the other is to use the Window Controls Overlay (titleBarOverlay). Personally, I prefer the latter option because it requires less code and provides enough parameters in titleBarOverlay to customize the buttons according to my preferences.
However, I encountered an issue with the overlay leaving a 1px gap around the buttons and I haven't found a way to adjust its position. Here is how the window buttons appear (I added a red title bar for better visibility):
https://i.sstatic.net/B4gvd.png
This is the code snippet for creating the window in main.js:
const createWindow = () => {
const win = new BrowserWindow({
width: 1100,
height: 900,
webPreferences: {
preload: path.join(__dirname, "preload.js")
},
backgroundColor: "#0a0a0a",
frame: false,
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#323232',
symbolColor: '#ffffff',
height: 30
}
})
win.loadFile("index.html");
}
The CSS style in index.html includes the following code (where title_bar is a div directly under the body element):
body {
border: none;
margin: 0px;
padding: 0px;
}
#title_bar {
-webkit-app-region: drag;
height: 30px;
background-color: red;
}
Is there any way to eliminate this gap? If not, should I resort to manually adding window buttons as mentioned earlier to achieve the desired appearance?
I couldn't find much documentation on titleBarOverlay. Is this feature relatively new or possibly getting deprecated?