v12-ui/dist/Hooks/useDataTheme.cjs

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

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),s=["dark","light","transparent"];function a(t){const[i,o]=c.useState(()=>{if(t)return t;if(typeof window>"u")return"dark";const e=document.documentElement.getAttribute("data-theme");return e&&s.includes(e)?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"});return c.useEffect(()=>{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.useEffect(()=>{const e=new MutationObserver(n=>{for(const r of n){if(r.type!=="attributes"||r.attributeName!=="data-theme")return;const u=document.documentElement.getAttribute("data-theme");u&&s.includes(u)&&o(u)}});return e.observe(document.documentElement,{attributes:!0}),()=>e.disconnect()},[]),{theme:i}}exports.useDataTheme=a;