feat(desktop): sync title bar theme with resolved app theme

packages/app/src/app/_layout.tsx

@@ -28,6 +28,7 @@ import {
 import { shouldUseDesktopDaemon } from "@/desktop/daemon/desktop-daemon";
 import { StartupSplashScreen } from "@/screens/startup-splash-screen";
 import { loadSettingsFromStorage } from "@/hooks/use-settings";
+import { useColorScheme } from "@/hooks/use-color-scheme";
 import { SessionProvider } from "@/contexts/session-context";
 import type { HostProfile } from "@/types/host-connection";
 import {
@@ -68,6 +69,7 @@ import {
   ensureOsNotificationPermission,
 } from "@/utils/os-notifications";
 import { getDesktopHost } from "@/desktop/host";
+import { setDesktopTitleBarTheme } from "@/desktop/electron/window";
 import { buildNotificationRoute } from "@/utils/notification-routing";
 import {
   buildHostRootRoute,
@@ -412,7 +414,9 @@ function ProvidersWrapper({ children }: { children: ReactNode }) {
   const { settings, isLoading: settingsLoading } = useAppSettings();
   const storeReady = useStoreReady();
   const { upsertConnectionFromOfferUrl } = useHostMutations();
+  const systemColorScheme = useColorScheme();
   const isLoading = settingsLoading || !storeReady;
+  const resolvedTheme = settings.theme === "auto" ? (systemColorScheme ?? "light") : settings.theme;
 
   // Apply theme setting on mount and when it changes
   useEffect(() => {
@@ -425,6 +429,16 @@ function ProvidersWrapper({ children }: { children: ReactNode }) {
     }
   }, [isLoading, settings.theme]);
 
+  useEffect(() => {
+    if (isLoading || Platform.OS !== "web") {
+      return;
+    }
+
+    void setDesktopTitleBarTheme(resolvedTheme).catch((error) => {
+      console.warn("[DesktopWindow] Failed to update title bar theme", error);
+    });
+  }, [isLoading, resolvedTheme]);
+
   if (isLoading) {
     const isDesktopManaged =
       !settingsLoading && shouldUseDesktopDaemon() && settings.manageBuiltInDaemon;

packages/app/src/desktop/electron/window.ts

@@ -27,3 +27,12 @@ export async function isDesktopFullscreen(): Promise<boolean> {
   }
   return await win.isFullscreen();
 }
+
+export async function setDesktopTitleBarTheme(theme: "light" | "dark"): Promise<void> {
+  const win = getDesktopWindow();
+  if (!win || typeof win.setTitleBarTheme !== "function") {
+    return;
+  }
+
+  await win.setTitleBarTheme(theme);
+}

packages/app/src/desktop/host.ts

@@ -51,6 +51,7 @@ export interface DesktopWindowBridge {
   endMove?: () => void;
   toggleMaximize?: () => Promise<void>;
   isFullscreen?: () => Promise<boolean>;
+  setTitleBarTheme?: (theme: "light" | "dark") => Promise<void>;
   onResized?: <TEvent = unknown>(
     handler: (event: TEvent) => void,
   ) => Promise<() => void> | (() => void);