feat(system-theme): add listener to update theme whenever system pref…

…erences change

app/.eslintrc.cjs → .eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     parserOptions: {
         ecmaVersion: "latest",
         sourceType: "module",
-        project: [__dirname + "/tsconfig.json"],
+        project: [__dirname + "/app/tsconfig.json"],
     },
     extends: [
         "eslint:recommended",

app/web/components/theme-provider.tsx

@@ -1,4 +1,4 @@
-import { useContext, useLayoutEffect, type ReactNode } from "react";
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef, type ReactNode } from "react";
 import { type Theme } from "../../types";
 import { myMermaid } from "./markdown/mermaid";
 import { websocketContext } from "./websocket-provider/context";
@@ -12,8 +12,8 @@ export function ThemeProvider({ children, THEME }: { children: ReactNode; THEME:
         return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
 
-    useLayoutEffect(() => {
-        function handleThemeChange(newTheme: "light" | "dark") {
+    const handleThemeChange = useCallback(
+        (newTheme: "light" | "dark") => {
             const rootHtml = document.getElementsByTagName("html")[0]!;
             let className = "pantsdown " + newTheme;
             if (high_contrast) className += " high-contrast";
@@ -23,12 +23,33 @@ export function ThemeProvider({ children, THEME }: { children: ReactNode; THEME:
                 theme: newTheme === "light" ? "default" : "dark",
             });
             if (currentPath) wsRequest({ type: "get_entry", path: currentPath });
-        }
+        },
+        [currentPath, high_contrast, wsRequest],
+    );
 
+    useLayoutEffect(() => {
         if (theme === "system") handleThemeChange(getSystemTheme());
         else handleThemeChange(theme);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [theme, high_contrast, wsRequest]);
+    }, [theme, handleThemeChange]);
+
+    const changeEventHandler = useRef((event: MediaQueryListEvent) => {
+        const newTheme = event.matches ? "dark" : "light";
+        wsRequest({ type: "update_config", action: ["theme_name", "system"] });
+        handleThemeChange(newTheme);
+    });
+
+    useEffect(() => {
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", changeEventHandler.current);
+
+        return () => {
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                // eslint-disable-next-line
+                .removeEventListener("change", changeEventHandler.current);
+        };
+    }, [changeEventHandler]);
 
     return children;
 }