{"version":3,"file":"ImageInvert.DVOffk20.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/7GJwvGtcJ4oo0wIqC7V0/1D1cAnLC6ib3plsmGJKt/ImageInvert.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState}from\"react\";export function withClass(Component){return props=>{// 通过 useState 来管理当前的颜色模式\nconst[isDarkMode,setIsDarkMode]=useState(()=>typeof window!==\"undefined\"&&window.matchMedia(\"(prefers-color-scheme: dark)\").matches);// 使用 useEffect 监听颜色模式的变化\nuseEffect(()=>{const mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");const handleChange=e=>setIsDarkMode(e.matches);// 添加事件监听\nmediaQuery.addEventListener(\"change\",handleChange);// 清理事件监听\nreturn()=>{mediaQuery.removeEventListener(\"change\",handleChange);};},[]);// 根据当前的主题设置样式\nconst darkInvertStyle=isDarkMode?{filter:\"invert(1)\",maxWidth:\"100%\",height:\"auto\"}:{maxWidth:\"100%\",height:\"auto\"};// 将 dark-invert 类和动态样式传递给组件\nreturn /*#__PURE__*/_jsx(Component,{...props,className:`${props.className} dark-invert`,style:darkInvertStyle});};}\nexport const __FramerMetadata__ = {\"exports\":{\"withClass\":{\"type\":\"reactHoc\",\"name\":\"withClass\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageInvert.map"],"mappings":"2MAAiF,SAAgB,EAAU,EAAU,CAAC,MAAO,IAAO,CACpI,GAAK,CAAC,EAAW,GAAeA,MAAoB,IAAS,QAAa,EAAO,WAAW,+BAA+B,CAAC,QAAQ,CACpI,MAAc,CAAC,IAAM,EAAW,EAAO,WAAW,+BAA+B,CAAO,EAAa,GAAG,EAAc,EAAE,QAAQ,CAEhI,OADA,EAAW,iBAAiB,SAAS,EAAa,KACxC,CAAC,EAAW,oBAAoB,SAAS,EAAa,GAAK,EAAE,CAAC,CACxE,IAAM,EAAgB,EAAW,CAAC,OAAO,YAAY,SAAS,OAAO,OAAO,OAAO,CAAC,CAAC,SAAS,OAAO,OAAO,OAAO,CACnH,OAAoB,EAAK,EAAU,CAAC,GAAG,EAAM,UAAU,GAAG,EAAM,UAAU,cAAc,MAAM,EAAgB,CAAC,uBANpE,IAAsC"}