{"version":3,"file":"ThemeImage.CaCPLazN.mjs","names":["useState","mediaQuery"],"sources":["https:/framerusercontent.com/modules/u4AEydNSPj3VdA7PyA5x/yvWfU9rNFcHzjZRFs0i3/ThemeImage.js"],"sourcesContent":["// Theme-aware image component that switches between light and dark images based on system theme or theme toggle\n// Author: https://x.com/shafranofficial\n// Hire the developer: https://contra.com/shafranlive/\n// ------------------------------\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useState,useEffect,startTransition}from\"react\";/**\n * Theme Image - Switches between light and dark images based on theme\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ThemeImage(props){const{lightImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Light theme image\"},darkImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Dark theme image\"},sizing=\"cover\",borderRadius=\"0px\"}=props;const[isDarkTheme,setIsDarkTheme]=useState(null);const isCanvas=RenderTarget.current()===RenderTarget.canvas;useEffect(()=>{if(typeof window===\"undefined\")return;const updateTheme=()=>{// Check if we're in Framer canvas\nif(isCanvas){// Check for Framer's canvas theme indicators\nconst htmlElement=document.documentElement;const bodyElement=document.body;// Check various possible theme attributes and classes\nconst themeAttribute=htmlElement.getAttribute(\"data-framer-theme\")||htmlElement.getAttribute(\"data-theme\")||bodyElement.getAttribute(\"data-framer-theme\")||bodyElement.getAttribute(\"data-theme\");if(themeAttribute){startTransition(()=>setIsDarkTheme(themeAttribute===\"dark\"));return;}// Check for dark mode classes\nconst isDarkClass=htmlElement.classList.contains(\"dark\")||htmlElement.classList.contains(\"framer-dark\")||bodyElement.classList.contains(\"dark\")||bodyElement.classList.contains(\"framer-dark\");if(isDarkClass){startTransition(()=>setIsDarkTheme(true));return;}// Check for light mode classes\nconst isLightClass=htmlElement.classList.contains(\"light\")||htmlElement.classList.contains(\"framer-light\")||bodyElement.classList.contains(\"light\")||bodyElement.classList.contains(\"framer-light\");if(isLightClass){startTransition(()=>setIsDarkTheme(false));return;}// Fallback to system preference in canvas\nconst mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");startTransition(()=>setIsDarkTheme(mediaQuery.matches));return;}// For published sites and preview\nconst currentToggleState=localStorage.getItem(\"theme\");if(currentToggleState!==null){startTransition(()=>setIsDarkTheme(currentToggleState===\"dark\"));}else{const mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");startTransition(()=>setIsDarkTheme(mediaQuery.matches));}};// Event listener for changes in the device theme\nconst osThemeChange=e=>{if(!isCanvas||!document.documentElement.hasAttribute(\"data-framer-theme\")){startTransition(()=>setIsDarkTheme(e.matches));}};// Update the theme when the page loads\nupdateTheme();// Listen for theme changes made by the theme toggle component\nwindow.addEventListener(\"themeChange\",updateTheme);// Listen for canvas-specific theme changes\nif(isCanvas){// Listen for attribute changes on document element\nconst observer=new MutationObserver(mutations=>{mutations.forEach(mutation=>{if(mutation.type===\"attributes\"&&(mutation.attributeName===\"data-framer-theme\"||mutation.attributeName===\"data-theme\"||mutation.attributeName===\"class\")){updateTheme();}});});observer.observe(document.documentElement,{attributes:true,attributeFilter:[\"data-framer-theme\",\"data-theme\",\"class\"]});// Also observe body element\nobserver.observe(document.body,{attributes:true,attributeFilter:[\"data-framer-theme\",\"data-theme\",\"class\"]});// Clean up observer\nreturn()=>{window.removeEventListener(\"themeChange\",updateTheme);observer.disconnect();};}// Listen for changes in the device theme (for published sites)\nconst mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");mediaQuery.addEventListener(\"change\",osThemeChange);// Clean up the event listeners when the component unmounts\nreturn()=>{window.removeEventListener(\"themeChange\",updateTheme);mediaQuery.removeEventListener(\"change\",osThemeChange);};},[isCanvas]);// Before the theme has been determined, render nothing.\n// This prevents flashing while the page loads.\nif(isDarkTheme===null){return null;}// Once the theme is determined, render the image corresponding to the theme.\nconst currentImage=isDarkTheme?darkImage:lightImage;return /*#__PURE__*/_jsx(\"img\",{src:currentImage.src,alt:currentImage.alt,style:{width:\"100%\",height:\"100%\",objectFit:sizing,borderRadius}});}addPropertyControls(ThemeImage,{lightImage:{type:ControlType.ResponsiveImage,title:\"Light Image\"},darkImage:{type:ControlType.ResponsiveImage,title:\"Dark Image\"},sizing:{type:ControlType.Enum,title:\"Object Fit\",defaultValue:\"cover\",options:[\"cover\",\"contain\",\"fill\"],optionTitles:[\"Fill\",\"Fit\",\"Stretch\"]},borderRadius:{type:ControlType.BorderRadius,title:\"Border Radius\",defaultValue:\"0px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ThemeImage\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ThemeImage.map"],"mappings":"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"}