Fix theme

apps/yaak-client/components/JsonBodyEditor.tsx

@@ -1,6 +1,7 @@
 import { linter } from '@codemirror/lint';
 import type { HttpRequest } from '@yaakapp-internal/models';
 import { patchModel } from '@yaakapp-internal/models';
+import { Icon } from '@yaakapp-internal/ui';
 import { useCallback, useMemo } from 'react';
 import { useKeyValue } from '../hooks/useKeyValue';
 import { textLikelyContainsJsonComments } from '../lib/jsonComments';
@@ -10,7 +11,6 @@ import { Dropdown } from './core/Dropdown';
 import type { EditorProps } from './core/Editor/Editor';
 import { jsonParseLinter } from './core/Editor/json-lint';
 import { Editor } from './core/Editor/LazyEditor';
-import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { IconTooltip } from './core/IconTooltip';
 

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);
+  }
+}