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

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

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

@@ -2,8 +2,9 @@ import { execFile } from "node:child_process"
 import { BrowserWindow, Notification, app, clipboard, dialog, ipcMain, shell } from "electron"
 import type { IpcMainEvent, IpcMainInvokeEvent } from "electron"
 
-import type { InitStep, ServerReadyData, SqliteMigrationProgress, WslConfig } from "../preload/types"
+import type { InitStep, ServerReadyData, SqliteMigrationProgress, TitlebarTheme, WslConfig } from "../preload/types"
 import { getStore } from "./store"
+import { setTitlebar } from "./windows"
 
 type Deps = {
   killSidecar: () => void
@@ -161,6 +162,11 @@ export function registerIpcHandlers(deps: Deps) {
 
   ipcMain.handle("get-zoom-factor", (event: IpcMainInvokeEvent) => event.sender.getZoomFactor())
   ipcMain.handle("set-zoom-factor", (event: IpcMainInvokeEvent, factor: number) => event.sender.setZoomFactor(factor))
+  ipcMain.handle("set-titlebar", (event: IpcMainInvokeEvent, theme: TitlebarTheme) => {
+    const win = BrowserWindow.fromWebContents(event.sender)
+    if (!win) return
+    setTitlebar(win, theme)
+  })
 }
 
 export function sendSqliteMigrationProgress(win: BrowserWindow, progress: SqliteMigrationProgress) {

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: {

packages/desktop-electron/src/preload/index.ts

@@ -57,6 +57,7 @@ const api: ElectronAPI = {
   relaunch: () => ipcRenderer.send("relaunch"),
   getZoomFactor: () => ipcRenderer.invoke("get-zoom-factor"),
   setZoomFactor: (factor) => ipcRenderer.invoke("set-zoom-factor", factor),
+  setTitlebar: (theme) => ipcRenderer.invoke("set-titlebar", theme),
   loadingWindowComplete: () => ipcRenderer.send("loading-window-complete"),
   runUpdater: (alertOnFail) => ipcRenderer.invoke("run-updater", alertOnFail),
   checkUpdate: () => ipcRenderer.invoke("check-update"),

packages/desktop-electron/src/preload/types.ts

@@ -10,6 +10,9 @@ export type SqliteMigrationProgress = { type: "InProgress"; value: number } | {
 export type WslConfig = { enabled: boolean }
 
 export type LinuxDisplayBackend = "wayland" | "auto"
+export type TitlebarTheme = {
+  mode: "light" | "dark"
+}
 
 export type ElectronAPI = {
   killSidecar: () => Promise<void>
@@ -57,6 +60,7 @@ export type ElectronAPI = {
   relaunch: () => void
   getZoomFactor: () => Promise<number>
   setZoomFactor: (factor: number) => Promise<void>
+  setTitlebar: (theme: TitlebarTheme) => Promise<void>
   loadingWindowComplete: () => void
   runUpdater: (alertOnFail: boolean) => Promise<void>
   checkUpdate: () => Promise<{ updateAvailable: boolean; version?: string }>