'titleBarOverlay option breaks draggable window in Electron.js

I'm trying to use the titleBarOverlay option in electron.js but when I try to drag the window, it won't drag. When I remove the option, the dragging feature works like normal. Is there a workaround for this?

index.js:

const { app, BrowserWindow } = require('electron');
let mainWindow;

app.on('ready', () => {
     mainWindow = new BrowserWindow({
          height: 600,
          width: 800,
          title: "Last Horizon",
          titleBarStyle: 'hidden',
          titleBarOverlay: {
              color: '#2e2e2e',
              symbolColor: '#ff6d4b'
          },
          webPreferences: {
             nodeIntegration: true
          }
     });
     mainWindow.removeMenu()
     mainWindow.loadFile('src/index.html');
});

index.html:

<!DOCTYPE html>
<html lang="en">
     <head>
          <link rel="stylesheet" href="styles.css"/>
     </head>
     <body>
          <div class="titleBar"></div>
          <div class="main">
               <h1>Hello World!</h1>
          </div>
     </body>
</html>

styles.css

html, body {
     -webkit-app-region: drag;
     background-color: #2e2e2e;
     color: white;
}

.titleBar {
     /* -webkit-app-region: drag; */
     background-color: #ffffff;
     width: 100%;
     height: 32px;
}

Solution 1:^[1]

Your BrowserWindow needs to have it's frame option set to false else the native titleBar will display, which in turn is then used by the OS to drag the window around, not your designated html region.

index.js

const { app, BrowserWindow } = require('electron');
let mainWindow;

app.on('ready', () => {
     mainWindow = new BrowserWindow({
          height: 600,
          width: 800,
          title: "Last Horizon",
          titleBarStyle: 'hidden',
          titleBarOverlay: {
              color: '#2e2e2e',
              symbolColor: '#ff6d4b'
          },
          frame: false, // <-- Add this line
          webPreferences: {
             nodeIntegration: true
          }
     });
     mainWindow.removeMenu()
     mainWindow.loadFile('src/index.html');
});

<!DOCTYPE html>
<html lang="en">
     <head>
          <link rel="stylesheet" href="styles.css"/>
     </head>
     <body>
          <div class="titleBar"></div>
          <div class="main">
               <h1>Hello World!</h1>
          </div>
     </body>
</html>

styles.css

html, body {
    background-color: #2e2e2e;
    color: white;
}

.titleBar {
    -webkit-app-select: none; /* <-- Add this line */
    -webkit-app-region: drag; /* <-- Add this line */
    background-color: #ffffff;
    width: 100%;
    height: 32px;
}

See Create frameless window and Set custom draggable region for more information.

Additionally, see BrowserWindow options for more information on the interaction between titleBarStyle and titleBarOverlay.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	midnight-coding

'titleBarOverlay option breaks draggable window in Electron.js

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]