WIP: dark mode

components/header/Header.tsx

@@ -109,19 +109,46 @@ function Header() {
   }, [deviceName, dispatch]);
   //----------------------------------------------------------------
 
-  // Dark/Light Mode Toggle
-  const [isDark, setIsDark] = useState(false);
-  useEffect(() => {
+  // Dark/Light Mode Toggle (persist in localStorage)
+  const [isDark, setIsDark] = useState<boolean>(() => {
     if (typeof window !== "undefined") {
-      const html = document.documentElement;
-      if (isDark) {
-        html.classList.add("dark");
-      } else {
-        html.classList.remove("dark");
+      return document.documentElement.classList.contains("dark");
+    }
+    return false;
+  });
+
+  // Apply + persist when toggled
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const html = document.documentElement;
+    if (isDark) {
+      html.classList.add("dark");
+      try {
+        localStorage.setItem("theme", "dark");
+      } catch {
+        /* ignore storage write errors */
+      }
+    } else {
+      html.classList.remove("dark");
+      try {
+        localStorage.setItem("theme", "light");
+      } catch {
+        /* ignore storage write errors */
       }
     }
   }, [isDark]);
 
+  // Sync if another tab changes the theme
+  useEffect(() => {
+    const handler = (e: StorageEvent) => {
+      if (e.key === "theme" && e.newValue) {
+        setIsDark(e.newValue === "dark");
+      }
+    };
+    window.addEventListener("storage", handler);
+    return () => window.removeEventListener("storage", handler);
+  }, []);
+
   return (
     <header className="bg-gray-300 dark:bg-gray-800 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black dark:text-white ">
       <div