feat: change window background color based on theme

src/main/index.ts

@@ -7,7 +7,7 @@ import type { Database } from "../database/index.ts"
 import { getGlobalSettings } from "../shared/settings/main.ts"
 import { createTranslate } from "../shared/utils/translate.ts"
 import { createMainWindow, showMainWindow } from "./mainWindow.ts"
-import { setNativeTheme } from "./nativeTheme.ts"
+import { handleNativeThemeChanges, setNativeTheme } from "./nativeTheme.ts"
 import { ensureUserDataPathExists } from "./saveData.ts"
 import { createSettingsWindow } from "./settingsWindow.ts"
 import { checkForUpdatesOnRequest, checkForUpdatesOnStartup } from "./updater.ts"
@@ -273,3 +273,5 @@ app.whenReady().then(async () => {
     }))
   }
 })
+
+handleNativeThemeChanges()

src/main/mainWindow.ts

@@ -6,6 +6,7 @@ import * as url from "node:url"
 import type { Database } from "../database/index.ts"
 import { InitialSetupEventMessage } from "../main_window_preload/index.ts"
 import { getGlobalSettings } from "../shared/settings/main.ts"
+import { getWindowBackgroundColor } from "./nativeTheme.ts"
 const debug = Debug("main:main")
 
 export const createMainWindow = async () => {
@@ -32,7 +33,7 @@ export const createMainWindow = async () => {
     center: true,
     title: "Optolith",
     acceptFirstMouse: true,
-    backgroundColor: "#111111",
+    backgroundColor: getWindowBackgroundColor(getGlobalSettings().theme),
     webPreferences: {
       preload: path.join(__dirname, "renderer_main_preload.js"),
     },

src/main/nativeTheme.ts

@@ -1,5 +1,6 @@
-import { nativeTheme } from "electron"
+import { BrowserWindow, nativeTheme } from "electron"
 import { Theme } from "../shared/schema/config.ts"
+import { getGlobalSettings } from "../shared/settings/main.ts"
 import { assertExhaustive } from "../shared/utils/typeSafety.ts"
 
 export const setNativeTheme = (theme: Theme | undefined) => {
@@ -10,3 +11,29 @@ export const setNativeTheme = (theme: Theme | undefined) => {
     default: assertExhaustive(theme)
   }
 }
+
+const DARK = "#111111"
+const LIGHT = "#f0f0f0"
+
+export const getWindowBackgroundColor = (theme: Theme | undefined) => {
+  switch (theme) {
+    case Theme.Dark:  return DARK
+    case Theme.Light: return "#f0f0f0"
+    case undefined:   return nativeTheme.shouldUseDarkColors ? DARK : LIGHT
+    default: assertExhaustive(theme)
+  }
+}
+
+export const setBackgroundColorForAllWindows = (theme: Theme | undefined) => {
+  const color = getWindowBackgroundColor(theme)
+
+  BrowserWindow.getAllWindows().forEach(window => {
+    window.setBackgroundColor(color)
+  })
+}
+
+export const handleNativeThemeChanges = () => {
+  nativeTheme.on("updated", () => {
+    setBackgroundColorForAllWindows(getGlobalSettings().theme)
+  })
+}

src/main/settingsWindow.ts

@@ -6,7 +6,7 @@ import { Database } from "../database/index.ts"
 import type { InitialSetupEventMessage } from "../settings_window_preload/index.ts"
 import { GlobalSettings } from "../shared/settings/GlobalSettings.ts"
 import { attachGlobalSettingsBroadcastToWindow, attachGlobalSettingsChanged, getGlobalSettings } from "../shared/settings/main.ts"
-import { setNativeTheme } from "./nativeTheme.ts"
+import { getWindowBackgroundColor, setNativeTheme } from "./nativeTheme.ts"
 const debug = Debug("main:settings")
 
 let settingsWindow: BrowserWindow | undefined = undefined
@@ -28,7 +28,7 @@ export const createSettingsWindow = async (
       center: true,
       title: "Optolith",
       acceptFirstMouse: true,
-      backgroundColor: "#111111",
+      backgroundColor: getWindowBackgroundColor(getGlobalSettings().theme),
       webPreferences: {
         preload: path.join(__dirname, "renderer_settings_preload.js"),
       },

src/main/updater.ts

@@ -7,6 +7,7 @@ import appIconMacOS from "../assets/icon/AppIcon.icns"
 import { Database } from "../database/index.ts"
 import { getGlobalSettings } from "../shared/settings/main.ts"
 import { InitialSetupEventMessage } from "../updater_window_preload/index.ts"
+import { getWindowBackgroundColor } from "./nativeTheme.ts"
 const debug = Debug("main:updater")
 
 type AvailableUpdateCheckResult = {
@@ -48,6 +49,7 @@ const createUpdaterWindow = async (database: Database) => {
     fullscreenable: false,
     maximizable: false,
     minimizable: false,
+    backgroundColor: getWindowBackgroundColor(getGlobalSettings().theme),
   })
 
   await updaterWindow.loadURL(url.format({

src/shared/settings/main.ts

@@ -1,4 +1,6 @@
 import { BrowserWindow, Event, ipcMain } from "electron"
+import { getWindowBackgroundColor } from "../../main/nativeTheme.ts"
+import { Theme } from "../schema/config.ts"
 import { GlobalSettings } from "./GlobalSettings.ts"
 
 const globalSettings: GlobalSettings = {
@@ -29,6 +31,10 @@ export const attachGlobalSettingsChanged = (
 export const attachGlobalSettingsBroadcastToWindow = (settingsWindow: BrowserWindow) => {
   attachGlobalSettingsChanged(settingsWindow, (key, value) => {
     BrowserWindow.getAllWindows().forEach(window => {
+      if (key === "theme") {
+        window.setBackgroundColor(getWindowBackgroundColor(value as Theme | undefined))
+      }
+
       if (window !== settingsWindow) {
         window.webContents.send("global-setting-changed", key, value)
       }