fix: replace theme provider usage with custom hook for dark mode detection

MiaoMint · MiaoMint · commit 00c338c9bcb2 · 2026-01-12T20:42:27.000+08:00
diff --git a/frontend/src/components/canvas-view.tsx b/frontend/src/components/canvas-view.tsx
@@ -52,7 +52,7 @@ import {
 import { database } from "../../wailsjs/go/models";
 import { useSystemInfo } from "@/hooks/use-system-info";
 import { cn } from "@/lib/utils";
-import { useTheme } from "./theme-provider";
+import { useIsDarkTheme } from "@/hooks/use-is-dark-theme";
 
 interface CanvasViewProps {
   project: database.Project;
@@ -65,8 +65,7 @@ const initialEdges: Edge[] = [];
 function CanvasEditor({ project, onBack }: CanvasViewProps) {
   const { _ } = useLingui();
   const { systemInfo } = useSystemInfo();
-  const { theme } = useTheme();
-  const isDarkMode = theme === "dark";
+  const isDarkMode = useIsDarkTheme();
   const [name, setName] = useState(project.name);
   const [isChatOpen, setIsChatOpen] = useState(false);
   const [chatMessage, setChatMessage] = useState("");
diff --git a/frontend/src/hooks/use-is-dark-theme.ts b/frontend/src/hooks/use-is-dark-theme.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "@/components/theme-provider";
+
+export function useIsDarkTheme() {
+  const { theme } = useTheme();
+  const [isDark, setIsDark] = useState(() => {
+    if (theme === "dark") return true;
+    if (theme === "light") return false;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+
+  useEffect(() => {
+    if (theme !== "system") {
+      setIsDark(theme === "dark");
+      return;
+    }
+
+    // Handle system theme changes
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsDark(e.matches);
+    };
+
+    setIsDark(mediaQuery.matches);
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [theme]);
+
+  return isDark;
+}
