@module-federation/devtools 0.0.0-chore-bump-node-22-20260710161714

package/dist/es/hooks/useDevtoolsTheme.js

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+function resolveThemeFromDevtools() {
+  var _a, _b;
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const devtools = (_a = window.chrome) == null ? void 0 : _a.devtools;
+  const themeName = (_b = devtools == null ? void 0 : devtools.panels) == null ? void 0 : _b.themeName;
+  if (typeof themeName === "string") {
+    return themeName.toLowerCase().includes("dark") ? "dark" : "light";
+  }
+  return null;
+}
+function resolveThemeFromMedia() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return null;
+  }
+  return window.matchMedia(DARK_MEDIA_QUERY).matches ? "dark" : "light";
+}
+function getInitialTheme() {
+  var _a, _b;
+  return (_b = (_a = resolveThemeFromDevtools()) != null ? _a : resolveThemeFromMedia()) != null ? _b : "light";
+}
+const useDevtoolsTheme = () => {
+  const [theme, setTheme] = useState(() => getInitialTheme());
+  useEffect(() => {
+    var _a;
+    if (typeof window === "undefined") {
+      return;
+    }
+    const devtools = (_a = window.chrome) == null ? void 0 : _a.devtools;
+    const panels = devtools == null ? void 0 : devtools.panels;
+    const onThemeChanged = panels == null ? void 0 : panels.onThemeChanged;
+    const handleThemeChange = (newThemeName) => {
+      if (typeof newThemeName !== "string") {
+        return;
+      }
+      const next = newThemeName.toLowerCase().includes("dark") ? "dark" : "light";
+      setTheme(next);
+    };
+    const fromDevtools = resolveThemeFromDevtools();
+    if (fromDevtools) {
+      setTheme(fromDevtools);
+    }
+    let mediaQuery = null;
+    const handleMediaQueryChange = (event) => {
+      setTheme(event.matches ? "dark" : "light");
+    };
+    if (onThemeChanged && typeof onThemeChanged.addListener === "function") {
+      onThemeChanged.addListener(handleThemeChange);
+    } else if (typeof window.matchMedia === "function") {
+      mediaQuery = window.matchMedia(DARK_MEDIA_QUERY);
+      if (typeof mediaQuery.addEventListener === "function") {
+        mediaQuery.addEventListener("change", handleMediaQueryChange);
+      } else if (typeof mediaQuery.addListener === "function") {
+        mediaQuery.addListener(handleMediaQueryChange);
+      }
+    }
+    return () => {
+      if (onThemeChanged && typeof onThemeChanged.removeListener === "function") {
+        onThemeChanged.removeListener(handleThemeChange);
+      }
+      if (mediaQuery) {
+        if (typeof mediaQuery.removeEventListener === "function") {
+          mediaQuery.removeEventListener("change", handleMediaQueryChange);
+        } else if (typeof mediaQuery.removeListener === "function") {
+          mediaQuery.removeListener(handleMediaQueryChange);
+        }
+      }
+    };
+  }, []);
+  return theme;
+};
+export {
+  useDevtoolsTheme
+};