Fix data pipelines once and for all

frontend/src/hooks/useIsDarkTheme.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Tracks whether dark mode is active by observing the html.dark class.
+ * Useful in components that don't receive the theme as a prop (showcase,
+ * pricing backdrop) but must keep canvas/map content in sync with it.
+ */
+export function useIsDarkTheme(): boolean {
+  const [isDark, setIsDark] = useState(() => document.documentElement.classList.contains('dark'));
+  useEffect(() => {
+    const observer = new MutationObserver(() =>
+      setIsDark(document.documentElement.classList.contains('dark'))
+    );
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+  return isDark;
+}