Fix theme

apps/yaak-proxy/theme.ts

@@ -1,9 +1,35 @@
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { setWindowTheme } from "@yaakapp-internal/mac-window";
 import {
   applyThemeToDocument,
   defaultDarkTheme,
+  defaultLightTheme,
+  getCSSAppearance,
   platformFromUserAgent,
   setPlatformOnDocument,
+  subscribeToPreferredAppearance,
+  type Appearance,
 } from "@yaakapp-internal/theme";
 
 setPlatformOnDocument(platformFromUserAgent(navigator.userAgent));
-applyThemeToDocument(defaultDarkTheme);
+
+// Apply a quick initial theme based on CSS media query
+let preferredAppearance: Appearance = getCSSAppearance();
+applyTheme(preferredAppearance);
+
+// Then subscribe to accurate OS appearance detection and changes
+subscribeToPreferredAppearance((a) => {
+  preferredAppearance = a;
+  applyTheme(preferredAppearance);
+});
+
+// Show window after initial theme is applied (window starts hidden to prevent flash)
+getCurrentWebviewWindow().show().catch(console.error);
+
+function applyTheme(appearance: Appearance) {
+  const theme = appearance === "dark" ? defaultDarkTheme : defaultLightTheme;
+  applyThemeToDocument(theme);
+  if (theme.base.surface != null) {
+    setWindowTheme(theme.base.surface);
+  }
+}