"use client";
import { useEffect } from "react";
/**
 * Adds a `<meta name="color-scheme" content="light">` or
 * `<meta name="color-scheme" content="dark">` into the head element. This
 * should not be used if you are using the `useColorSchemeProvider` since it is
 * already built in.
 *
 * @example
 * ```tsx
 * import { useColorScheme } from "@react-md/core/theme/useColorScheme";
 * import { useColorSchemeMetaTag } from "@react-md/core/theme/useColorSchemeMetaTag";
 *
 * function Example() {
 *   const { currentColor } = useColorScheme();
 *   useColorSchemeMetaTag({ colorScheme: currentColor });
 *
 *   return null;
 * }
 * ```
 *
 * @since 6.0.0
 */ export function useColorSchemeMetaTag(options) {
    const { disabled, colorScheme } = options;
    useEffect(()=>{
        if (disabled || document.querySelector('meta[name="color-scheme"]')) {
            return;
        }
        // Adding the meta tag allows the default browser styles for form inputs to
        // be updated as well.
        //
        // Chrome and Firefox:
        // - the input type="number"'s spinner color will update from grey to white
        // - native `<select>` background color updates from grey/white to a dark color
        //
        // Chrome:
        // - the date/time/datetime icons will change from black to white
        // - the date/time/datetime pickers will use a darker theme instead of white
        const meta = document.createElement("meta");
        meta.name = "color-scheme";
        meta.content = colorScheme;
        document.head.appendChild(meta);
        return ()=>{
            document.head.removeChild(meta);
        };
    }, [
        disabled,
        colorScheme
    ]);
}

//# sourceMappingURL=useColorSchemeMetaTag.js.map