Improve handling of dark mode theme in order to avoid jitter when loading new page

src/interface/web/app/common/utils.ts

@@ -89,6 +89,40 @@ export const useMutationObserver = (
     }, [ref, callback, options])
 }
 
+export function useIsDarkMode() {
+    const [darkMode, setDarkMode] = useState(false);
+    const [initialLoadDone, setInitialLoadDone] = useState(false);
+
+    useEffect(() => {
+        if (localStorage.getItem("theme") === "dark") {
+            document.documentElement.classList.add("dark");
+            setDarkMode(true);
+        } else if (localStorage.getItem("theme") === "light") {
+            document.documentElement.classList.remove("dark");
+            setDarkMode(false);
+        } else {
+            const mq = window.matchMedia("(prefers-color-scheme: dark)");
+            if (mq.matches) {
+                document.documentElement.classList.add("dark");
+                setDarkMode(true);
+            }
+        }
+        setInitialLoadDone(true);
+    }, []);
+
+    useEffect(() => {
+        if (!initialLoadDone) return;
+        if (darkMode) {
+            document.documentElement.classList.add("dark");
+        } else {
+            document.documentElement.classList.remove("dark");
+        }
+        localStorage.setItem("theme", darkMode ? "dark" : "light");
+    }, [darkMode, initialLoadDone]);
+
+    return [darkMode, setDarkMode] as const;
+}
+
 export const convertBytesToText = (fileSize: number) => {
     if (fileSize < 1024) {
         return `${fileSize} B`;