feat: unify card runtime and event-driven web ui

frontend/src/theme/useThemePreference.ts

@@ -0,0 +1,30 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+import {
+  applyThemeToDocument,
+  DEFAULT_THEME,
+  getStoredThemeName,
+  THEME_OPTIONS,
+  THEME_STORAGE_KEY,
+  type ThemeName,
+} from "./themes";
+
+export function useThemePreference() {
+  const [themeName, setThemeName] = useState<ThemeName>(() => {
+    if (typeof window === "undefined") return DEFAULT_THEME;
+    return getStoredThemeName();
+  });
+
+  useEffect(() => {
+    applyThemeToDocument(themeName);
+    window.localStorage.setItem(THEME_STORAGE_KEY, themeName);
+  }, [themeName]);
+
+  return useMemo(
+    () => ({
+      themeName,
+      themeOptions: THEME_OPTIONS,
+      setThemeName,
+    }),
+    [themeName],
+  );
+}