add Lisntener to prefers-color-scheme

islands/Container.tsx

@@ -12,7 +12,7 @@ import TaskManager from "./TaskManager.tsx";
 import { initState, set_state } from "../server/state.ts";
 import NewTask from "../components/NewTask.tsx";
 import { parse_int } from "../server/parse.ts";
-import { detect_darkmode } from "../server/dark.ts";
+import { addDarkModeListener, detect_darkmode } from "../server/dark.ts";
 import { registeServiceWorker } from "../server/sw.ts";
 import { initCfg } from "../server/cfg.ts";
 
@@ -77,6 +77,15 @@ export default class Container extends Component<ContainerProps> {
                 },
             );
             initCfg();
+            addDarkModeListener((e) => {
+                if (darkmode === DarkMode.Auto) {
+                    if (e.matches) {
+                        document.body.classList.add("dark-scheme");
+                    } else {
+                        document.body.classList.remove("dark-scheme");
+                    }
+                }
+            });
         }, []);
         return (
             <div>

server/dark.ts

@@ -2,3 +2,11 @@ export function detect_darkmode() {
     return window.matchMedia &&
         window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
+
+export function addDarkModeListener(e: (e: MediaQueryListEvent) => void) {
+    return window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener(
+            "change",
+            e,
+        );
+}