From 832b200d5556092604222eda7c1cb82e7df0dc62 Mon Sep 17 00:00:00 2001
From: Lemon-miaow <admin@lemonmiaow.xyz>
Date: Sun, 28 Jun 2026 03:41:50 +0800
Subject: [PATCH] fix(panel): reactive system theme detection

---
 panel/index.html                  |   3 +-
 panel/src/App.tsx                 |   2 +-
 panel/src/components/AppShell.tsx |   5 +-
 panel/src/index.css               |   6 --
 panel/src/lib/theme.tsx           | 162 +++++++++++++++---------------
 5 files changed, 86 insertions(+), 92 deletions(-)

diff --git a/panel/index.html b/panel/index.html
index 8de346c..ef82329 100644
--- a/panel/index.html
+++ b/panel/index.html
@@ -6,8 +6,7 @@
     <title>Felis · Control Panel</title>
     <script>
       try {
-        const theme = localStorage.getItem("felis-theme") || "system";
-        const dark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+        const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
         if (dark) {
           document.documentElement.classList.add("dark");
         } else {
diff --git a/panel/src/App.tsx b/panel/src/App.tsx
index ff1d4df..6904a38 100644
--- a/panel/src/App.tsx
+++ b/panel/src/App.tsx
@@ -22,7 +22,7 @@ import { FleetTable } from "@/pages/ops/FleetTable";
 // the split is by concern, not by tier. TierProvider fetches /me once at boot.
 export default function App() {
   return (
-    <ThemeProvider storageKey="felis-theme">
+    <ThemeProvider>
       <TierProvider>
         <BrowserRouter>
         <Routes>
diff --git a/panel/src/components/AppShell.tsx b/panel/src/components/AppShell.tsx
index a7176ae..5fc3b8d 100644
--- a/panel/src/components/AppShell.tsx
+++ b/panel/src/components/AppShell.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { NavLink, Outlet } from "react-router-dom";
-import { Cat, Globe, Sun, Moon, LogOut, UserRound } from "lucide-react";
+import { Cat, Globe, Sun, Moon, LogOut } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "@/lib/utils";
@@ -130,7 +130,8 @@ function ThemeToggle() {
       aria-label={t("toggle_theme")}
       title={t("toggle_theme")}
     >
-      {theme === "light" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {theme === "light" && <Sun className="h-4 w-4" />}
+      {theme === "dark" && <Moon className="h-4 w-4" />}
     </button>
   );
 }
diff --git a/panel/src/index.css b/panel/src/index.css
index 7436ebf..5fca469 100644
--- a/panel/src/index.css
+++ b/panel/src/index.css
@@ -55,10 +55,4 @@
     font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     -webkit-font-smoothing: antialiased;
   }
-
-  /* Global theme toggle transition */
-  .theme-transitioning,
-  .theme-transitioning * {
-    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, text-decoration-color 150ms ease, fill 150ms ease, stroke 150ms ease !important;
-  }
 }
diff --git a/panel/src/lib/theme.tsx b/panel/src/lib/theme.tsx
index a8817c3..7a3938a 100644
--- a/panel/src/lib/theme.tsx
+++ b/panel/src/lib/theme.tsx
@@ -1,98 +1,98 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 export type Theme = "light" | "dark";
 
-type ThemeProviderProps = {
-  children: React.ReactNode;
-  storageKey?: string;
-};
-
 type ThemeProviderState = {
+  /** The resolved, active theme ("light" | "dark") applied to the DOM. */
   theme: Theme;
   setTheme: (theme: Theme) => void;
   toggleTheme: () => void;
 };
 
-const initialState: ThemeProviderState = {
+const ThemeContext = createContext<ThemeProviderState>({
   theme: "dark",
-  setTheme: () => null,
-  toggleTheme: () => null,
-};
+  setTheme: () => {},
+  toggleTheme: () => {},
+});
 
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+const SYSTEM_DARK_QUERY = "(prefers-color-scheme: dark)";
 
-export function ThemeProvider({
-  children,
-  storageKey = "felis-theme",
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>(() => {
-    const stored = localStorage.getItem(storageKey) as Theme | null;
-    if (stored === "light" || stored === "dark") {
-      return stored;
-    }
-    // Auto-detect system preference
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  });
+// ---- system theme store ----
 
-  useEffect(() => {
-    const root = window.document.documentElement;
-    root.classList.remove("light", "dark");
-    root.classList.add(theme);
-  }, [theme]);
-
-  // Listen to system preference changes ONLY IF the user hasn't explicitly set a preference yet
-  useEffect(() => {
-    const stored = localStorage.getItem(storageKey);
-    if (stored === "light" || stored === "dark") {
-      return;
-    }
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleSystemThemeChange = (e: MediaQueryListEvent) => {
-      const root = window.document.documentElement;
-      root.classList.add("theme-transitioning");
-      setThemeState(e.matches ? "dark" : "light");
-      setTimeout(() => {
-        root.classList.remove("theme-transitioning");
-      }, 150);
-    };
-
-    mediaQuery.addEventListener("change", handleSystemThemeChange);
-    return () => {
-      mediaQuery.removeEventListener("change", handleSystemThemeChange);
-    };
-  }, [storageKey]);
-
-  const setTheme = (newTheme: Theme) => {
-    const root = window.document.documentElement;
-    root.classList.add("theme-transitioning");
-    localStorage.setItem(storageKey, newTheme);
-    setThemeState(newTheme);
-    setTimeout(() => {
-      root.classList.remove("theme-transitioning");
-    }, 150);
-  };
-
-  const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark");
-  };
-
-  return (
-    <ThemeProviderContext.Provider
-      {...props}
-      value={{ theme, setTheme, toggleTheme }}
-    >
-      {children}
-    </ThemeProviderContext.Provider>
-  );
+function systemThemeQuery() {
+  if (typeof window === "undefined" || !window.matchMedia) return null;
+  return window.matchMedia(SYSTEM_DARK_QUERY);
 }
 
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
+function systemThemeSnapshot(): Theme {
+  return systemThemeQuery()?.matches ? "dark" : "light";
+}
 
-  if (context === undefined)
-    throw new Error("useTheme must be used within a ThemeProvider");
+function applyClass(t: Theme) {
+  const root = document.documentElement;
+  if (t === "dark") {
+    root.classList.add("dark");
+    root.classList.remove("light");
+  } else {
+    root.classList.add("light");
+    root.classList.remove("dark");
+  }
+}
 
-  return context;
-};
+// ---- provider ----
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(systemThemeSnapshot);
+
+  const setTheme = useCallback(
+    (next: Theme) => {
+      // Direct DOM write to prevent visual lag on transition.
+      setThemeState(next);
+      applyClass(next);
+    },
+    [],
+  );
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+
+  useEffect(() => {
+    const mql = systemThemeQuery();
+    if (!mql) return;
+
+    const syncSystemTheme = () => setThemeState(mql.matches ? "dark" : "light");
+    syncSystemTheme();
+
+    if (mql.addEventListener) {
+      mql.addEventListener("change", syncSystemTheme);
+      return () => mql.removeEventListener("change", syncSystemTheme);
+    }
+
+    mql.addListener?.(syncSystemTheme);
+    return () => mql.removeListener?.(syncSystemTheme);
+  }, []);
+
+  // Sync the class whenever the resolved theme changes.
+  useEffect(() => {
+    applyClass(theme);
+  }, [theme]);
+
+  const value = useMemo<ThemeProviderState>(
+    () => ({ theme, setTheme, toggleTheme }),
+    [theme, setTheme, toggleTheme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}