T45a Site · Stack: Vite 8, React 19 and TanStack Router under pnpm; routes, theme, fonts, the manifest

frontend/src/theme.ts

@@ -1,6 +1,8 @@
+import { useSyncExternalStore } from "react";
+
 export type Mode = "light" | "dark";
 
-const listeners = new Set<(mode: Mode) => void>();
+const listeners = new Set<() => void>();
 
 export function mode(): Mode {
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
@@ -10,11 +12,18 @@ export function setMode(next: Mode): void {
   document.documentElement.classList.toggle("dark", next === "dark");
   try {
     localStorage.setItem("ely-theme", next);
-  } catch {}
-  listeners.forEach((listen) => listen(next));
+  } catch (error) {
+    console.warn("theme: could not keep the mode", error);
+  }
+  listeners.forEach((listen) => listen());
 }
 
-export function onMode(listen: (mode: Mode) => void): () => void {
+function subscribe(listen: () => void): () => void {
   listeners.add(listen);
   return () => listeners.delete(listen);
 }
+
+/** The site's mode, redrawn when it turns. */
+export function useMode(): Mode {
+  return useSyncExternalStore(subscribe, mode);
+}