fix(electron): theme Windows titlebar overlay (#16843)

Co-authored-by: Brendan Allan <brendonovich@outlook.com>

packages/desktop-electron/src/main/windows.ts

@@ -1,7 +1,8 @@
 import windowState from "electron-window-state"
-import { app, BrowserWindow, nativeImage } from "electron"
+import { app, BrowserWindow, nativeImage, nativeTheme } from "electron"
 import { dirname, join } from "node:path"
 import { fileURLToPath } from "node:url"
+import type { TitlebarTheme } from "../preload/types"
 
 type Globals = {
   updaterEnabled: boolean
@@ -20,6 +21,24 @@ function iconPath() {
   return join(iconsDir(), `icon.${ext}`)
 }
 
+function tone() {
+  return nativeTheme.shouldUseDarkColors ? "dark" : "light"
+}
+
+function overlay(theme: Partial<TitlebarTheme> = {}) {
+  const mode = theme.mode ?? tone()
+  return {
+    color: "#00000000",
+    symbolColor: mode === "dark" ? "white" : "black",
+    height: 40,
+  }
+}
+
+export function setTitlebar(win: BrowserWindow, theme: Partial<TitlebarTheme> = {}) {
+  if (process.platform !== "win32") return
+  win.setTitleBarOverlay(overlay(theme))
+}
+
 export function setDockIcon() {
   if (process.platform !== "darwin") return
   app.dock?.setIcon(nativeImage.createFromPath(join(iconsDir(), "128x128@2x.png")))
@@ -31,6 +50,7 @@ export function createMainWindow(globals: Globals) {
     defaultHeight: 800,
   })
 
+  const mode = tone()
   const win = new BrowserWindow({
     x: state.x,
     y: state.y,
@@ -49,11 +69,7 @@ export function createMainWindow(globals: Globals) {
       ? {
           frame: false,
           titleBarStyle: "hidden" as const,
-          titleBarOverlay: {
-            color: "transparent",
-            symbolColor: "#999",
-            height: 40,
-          },
+          titleBarOverlay: overlay({ mode }),
         }
       : {}),
     webPreferences: {
@@ -71,6 +87,7 @@ export function createMainWindow(globals: Globals) {
 }
 
 export function createLoadingWindow(globals: Globals) {
+  const mode = tone()
   const win = new BrowserWindow({
     width: 640,
     height: 480,
@@ -83,11 +100,7 @@ export function createLoadingWindow(globals: Globals) {
       ? {
           frame: false,
           titleBarStyle: "hidden" as const,
-          titleBarOverlay: {
-            color: "transparent",
-            symbolColor: "#999",
-            height: 40,
-          },
+          titleBarOverlay: overlay({ mode }),
         }
       : {}),
     webPreferences: {