Electron Leaves 1px Border Around titleBarOverlay

Question

I'm very new to Electron and Node.js so forgive any misuse of the terminology.

I'm working on a Windows 10 application. I'm trying to gain the ability to customize the title bar area of my app (along the lines of other Electron apps like Github Desktop or Discord).

From what I found by searching and reading, there are two ways to do this: Do a frameless window and create all the elements yourself including the window control buttons OR do a frameless window and use the Window Controls Overlay (titleBarOverlay). I would prefer to do the latter just because it's less code and the few parameters titleBarOverlay has is enough to get the buttons to look the way I want.

The problem is that the overlay leaves a 1px gap around the buttons and I can't find a way to adjust the position of the overlay. This is what the window buttons look like (red title bar for contrast:

This is the window creation code 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 style in index.html includes this (title_bar is just 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 a way to get rid of this gap? If not, is the preferred method of accomplishing the look I want to add in the window buttons manually as mentioned above?

I have not been able to find much documentation on titleBarOverlay. Is this a very new feature? Or a feature that is being phased out?

midnight-coding · Accepted Answer · 2023-05-15T13:27:27.357

Unfortunately, this is a standard thing for all windows.

To test this, drag any (windowed) application installed on your computer over a white background. The result will be the same, being a 1px border around the whole window.

To achieve your desired look, you will need to drop the titleBarStyle and titleBarOverlay options and "build" the title bar yourself.

Below are two SO Answers I have provided in the past that may get you started in building your own title bar.

In answer to your questions, titleBarOverlay has been around for a while now and as far as I know, there are no plans to phase it out.

For additional reading see:

Electron Leaves 1px Border Around titleBarOverlay

1 Answers1