@pelatform/ui 1.5.9 → 2.0.0

package/dist/chunk-UEVIEY7W.js

@@ -0,0 +1,51 @@
+// src/hooks/use-meta-color.ts
+import * as React from "react";
+import { META_THEME_COLORS, THEME_MODES } from "@pelatform/ui.core";
+import { useTheme } from "@pelatform/ui.default/dep";
+function useMetaColor(defaultColors) {
+  const { resolvedTheme } = useTheme();
+  const isSystemDarkMode = React.useCallback(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }, []);
+  const getEffectiveTheme = React.useCallback(
+    (theme) => {
+      if (theme === THEME_MODES.SYSTEM) {
+        return isSystemDarkMode() ? THEME_MODES.DARK : THEME_MODES.LIGHT;
+      }
+      return theme;
+    },
+    [isSystemDarkMode]
+  );
+  const metaColor = React.useMemo(() => {
+    const colorsToUse = defaultColors ?? META_THEME_COLORS;
+    const effectiveTheme = getEffectiveTheme(resolvedTheme);
+    if (effectiveTheme === THEME_MODES.DARK) {
+      return colorsToUse[THEME_MODES.DARK];
+    } else if (effectiveTheme === THEME_MODES.LIGHT) {
+      return colorsToUse[THEME_MODES.LIGHT];
+    }
+    return colorsToUse[THEME_MODES.LIGHT];
+  }, [resolvedTheme, defaultColors, getEffectiveTheme]);
+  const setMetaColor = React.useCallback((color) => {
+    const metaTag = document.querySelector('meta[name="theme-color"]');
+    if (metaTag) {
+      metaTag.setAttribute("content", color);
+    } else {
+      const newMetaTag = document.createElement("meta");
+      newMetaTag.name = "theme-color";
+      newMetaTag.content = color;
+      document.head.appendChild(newMetaTag);
+    }
+  }, []);
+  return {
+    /** Current meta theme color based on resolved theme */
+    metaColor,
+    /** Function to manually set meta theme color */
+    setMetaColor
+  };
+}
+
+export {
+  useMetaColor
+};