v12-ui/dist/Hooks/useDataTheme.js

A React component library with a focus on utility-first design and accessibility.

import { useState as u, useEffect as c } from "react";
const d = ["dark", "light", "transparent"];
function m(t) {
  const [s, o] = u(() => {
    if (t) return t;
    if (typeof window > "u") return "dark";
    const e = document.documentElement.getAttribute("data-theme");
    return e && d.includes(e) ? e : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  });
  return c(() => {
    t && o(t);
    const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (r) => {
      o(r.matches ? "dark" : "light");
    };
    return e.addEventListener("change", n), () => {
      e.removeEventListener("change", n);
    };
  }, [t]), c(() => {
    const e = new MutationObserver((n) => {
      for (const r of n) {
        if (r.type !== "attributes" || r.attributeName !== "data-theme") return;
        const i = document.documentElement.getAttribute("data-theme");
        i && d.includes(i) && o(i);
      }
    });
    return e.observe(document.documentElement, { attributes: !0 }), () => e.disconnect();
  }, []), { theme: s };
}
export {
  m as useDataTheme
};