Sync titlebar overlay with theme

src/App.tsx

@@ -271,6 +271,14 @@ function readTheme(): ThemeMode {
   return stored && themeLabels.includes(stored) ? stored : "system";
 }
 
+function getEffectiveTheme(themeMode: ThemeMode): "light" | "dark" {
+  if (themeMode !== "system") {
+    return themeMode;
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
 export default function App() {
   const [input, setInput] = useState(sampleEnv);
   const [loadedPath, setLoadedPath] = useState<string | null>(null);
@@ -286,6 +294,16 @@ export default function App() {
   useEffect(() => {
     document.documentElement.dataset.theme = themeMode;
     localStorage.setItem("envhelper-theme", themeMode);
+
+    const updateTitlebar = () => {
+      void window.envHelper?.setTitlebarTheme(getEffectiveTheme(themeMode));
+    };
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+    updateTitlebar();
+    media.addEventListener("change", updateTitlebar);
+
+    return () => media.removeEventListener("change", updateTitlebar);
   }, [themeMode]);
 
   useEffect(() => {

src/vite-env.d.ts

@@ -9,5 +9,6 @@ interface Window {
   envHelper?: {
     openFile: () => Promise<EnvHelperFileResult | null>;
     saveFile: (content: string) => Promise<string | null>;
+    setTitlebarTheme: (theme: "light" | "dark") => Promise<void>;
   };
 }