import { useState, useEffect } from "react";

export function useHtmlThemeAttr() {
  const [theme, setTheme] = useState(() =>
    document.documentElement.getAttribute("data-theme") || "light"
  );

  useEffect(() => {
    const handler = (e) => setTheme(e.detail);
    document.addEventListener("set-theme", handler);
    return () => document.removeEventListener("set-theme", handler);
  }, []);

  return theme;
}