{
  "version": 3,
  "sources": ["../../src/web/components/DarkModeProvider.tsx", "../../src/web/components/DarkModeProvider.styles.ts"],
  "sourcesContent": ["import { PreferMouseDown } from \"@framerjs/app-shared/src/PreferMouseDown.tsx\"\nimport { ElectronThemeProvider, channelToParentFrame } from \"@framerjs/framer-services\"\nimport { unhandledError } from \"@framerjs/shared\"\nimport { hasFinePointer, isElectron } from \"@framerjs/shared/src/environment.ts\"\nimport type React from \"react\"\nimport { createContext, useCallback, useEffect, useLayoutEffect, useMemo, useState } from \"react\"\nimport { DarkModeLocalStorageKey } from \"utils/DarkModeLocalStorageKey.ts\"\nimport { useMediaQuery } from \"utils/useMediaQuery.ts\"\nimport { useLocalStorage } from \"../lib/useLocalStorage.ts\"\nimport * as styles from \"./DarkModeProvider.styles.ts\"\n\nexport interface DarkModeContextValue {\n\tisDarkMode: boolean\n\tisOverridingSystem: boolean\n\tsetDarkMode: (enabled: boolean) => void\n\tsetOverrideSystem: (override: boolean) => void\n}\n\nexport const DarkModeContext = createContext<DarkModeContextValue>({\n\tisDarkMode: false,\n\tisOverridingSystem: false,\n\tsetDarkMode: () => {},\n\tsetOverrideSystem: () => {},\n})\nDarkModeContext.displayName = \"DarkModeContext\"\n\ninterface Props {\n\tchildren: React.ReactNode\n\tforceDarkMode?: boolean\n\tisAgentExperimentOn?: boolean\n}\n\n/** Force dark mode is currently not supported in Electron because we only use it for on page editing. */\nfunction useElectronContextValue(_forceDarkMode: boolean): DarkModeContextValue {\n\tconst [theme, setTheme] = useState<ElectronThemeProvider.ThemeState>(() => ({\n\t\tisDarkMode: window.matchMedia(\"(prefers-color-scheme: dark)\").matches,\n\t\tisOverridingSystem: false,\n\t}))\n\n\tconst [electronThemeProvider] = useState(() => {\n\t\treturn ElectronThemeProvider.on(channelToParentFrame).expect()\n\t})\n\n\tuseEffect(() => {\n\t\tconst stream = electronThemeProvider.themeStateStream({\n\t\t\treplay: \"latest\",\n\t\t})\n\n\t\tstream.read(setTheme).catch(unhandledError)\n\t\treturn () => void stream.cancel()\n\t}, [electronThemeProvider])\n\n\tconst setDarkMode = useCallback(\n\t\t(isEnabled: boolean) => {\n\t\t\tvoid electronThemeProvider.setDarkMode({\n\t\t\t\tisEnabled,\n\t\t\t})\n\t\t},\n\t\t[electronThemeProvider],\n\t)\n\n\tconst setOverrideSystem = useCallback(\n\t\t(shouldOverride: boolean) => {\n\t\t\tvoid electronThemeProvider.setOverrideSystem({\n\t\t\t\tshouldOverride,\n\t\t\t})\n\t\t},\n\t\t[electronThemeProvider],\n\t)\n\n\treturn useMemo<DarkModeContextValue>(\n\t\t() => ({\n\t\t\tisDarkMode: theme.isDarkMode,\n\t\t\tisOverridingSystem: theme.isOverridingSystem,\n\t\t\tsetDarkMode,\n\t\t\tsetOverrideSystem,\n\t\t}),\n\t\t[theme.isDarkMode, theme.isOverridingSystem, setDarkMode, setOverrideSystem],\n\t)\n}\n\n// When going against the system setting the browser may/may not use the given color based on the lightness of it.\n// For example Safari won't allow a #fff theme when the system setting is dark mode.\nfunction overrideDocumentHead(preference: \"light\" | \"dark\") {\n\tconst desiredColor = document\n\t\t.querySelector(`meta[name=\"theme-color\"][media=\"(prefers-color-scheme: ${preference})\"]`)\n\t\t?.getAttribute(\"data-color\")\n\tif (!desiredColor) return\n\n\tconst allThemeColorMetaTags = document.querySelectorAll('meta[name=\"theme-color\"]')\n\tallThemeColorMetaTags.forEach(element => {\n\t\telement.setAttribute(\"content\", desiredColor)\n\t})\n}\n\nfunction useBrowserContextValue(forceDarkMode: boolean): DarkModeContextValue {\n\tconst [userDarkMode, setUserDarkMode] = useLocalStorage(DarkModeLocalStorageKey.DarkMode, false)\n\tconst [isOverridingSystem, setOverrideSystem] = useLocalStorage(DarkModeLocalStorageKey.OverrideSystem, false)\n\tconst systemDarkMode = useMediaQuery(\"(prefers-color-scheme: dark)\")\n\n\tconst isDarkMode = forceDarkMode || (isOverridingSystem ? userDarkMode : systemDarkMode)\n\n\tconst setDarkMode = useCallback(\n\t\t(isEnabled: boolean) => {\n\t\t\tif (forceDarkMode) return\n\t\t\tsetUserDarkMode(isEnabled)\n\t\t\tsetOverrideSystem(true)\n\t\t},\n\t\t[setUserDarkMode, setOverrideSystem, forceDarkMode],\n\t)\n\n\treturn useMemo<DarkModeContextValue>(\n\t\t() => ({\n\t\t\tisDarkMode,\n\t\t\tisOverridingSystem,\n\t\t\tsetDarkMode,\n\t\t\tsetOverrideSystem,\n\t\t}),\n\t\t[isDarkMode, isOverridingSystem, setDarkMode, setOverrideSystem],\n\t)\n}\n\nconst useContextValue = isElectron()\n\t? useElectronContextValue // We need to store the theme in Electron so we can sync it with the rest of the UI\n\t: useBrowserContextValue // Otherwise, we want to store the theme in localStorage\n\nexport function DarkModeProvider({ children, forceDarkMode = false, isAgentExperimentOn = false }: Props) {\n\tconst contextValue = useContextValue(forceDarkMode)\n\n\tuseLayoutEffect(() => {\n\t\tconst isDarkMode = contextValue.isDarkMode\n\t\t// Before switching the theme, add a class that prevents any UI from\n\t\t// transitioning colors. This prevents different parts of the app from\n\t\t// switching theme at different rates.\n\t\tdocument.body.classList.add(styles.disableTransitions)\n\t\t/**\n\t\t * @deprecated Use the data-framer-theme attribute instead. Can be\n\t\t * removed after the code block module has been updated.\n\t\t */\n\t\tdocument.body.classList.toggle(\"framer-theme-dark\", isDarkMode)\n\t\tdocument.body.setAttribute(\"data-framer-theme\", isDarkMode ? \"dark\" : \"light\")\n\n\t\t// Add a class to the body to indicate that the agent experiment is on and apply the agent theme\n\t\t// as the default theme.\n\t\tif (isAgentExperimentOn) {\n\t\t\tdocument.body.classList.add(\"agent\")\n\t\t} else {\n\t\t\tdocument.body.classList.remove(\"agent\")\n\t\t}\n\n\t\toverrideDocumentHead(isDarkMode ? \"dark\" : \"light\")\n\n\t\t// Immediately after switching the theme, remove the class that disables\n\t\t// transitions so that normal user interactions like hover return to\n\t\t// their normal behaviour.\n\t\trequestAnimationFrame(() => {\n\t\t\tdocument.body.classList.remove(styles.disableTransitions)\n\t\t})\n\n\t\tconst frames = window.frames\n\t\tfor (let index = 0; index < frames.length; index++) {\n\t\t\tframes[index]?.postMessage(\n\t\t\t\t{\n\t\t\t\t\tappearance: isDarkMode ? \"dark\" : \"light\",\n\t\t\t\t},\n\t\t\t\t\"*\",\n\t\t\t)\n\t\t}\n\t}, [contextValue, isAgentExperimentOn])\n\n\treturn (\n\t\t<DarkModeContext.Provider value={contextValue}>\n\t\t\t<PreferMouseDown enabled={hasFinePointer()}>{children}</PreferMouseDown>\n\t\t</DarkModeContext.Provider>\n\t)\n}\n", "import \"DarkModeProvider.styles_ksiyyo.wyw.css\"; export const disableTransitions = \"disableTransitions_d1r6g833\";"],
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,mBAA0F;;;ACLlC,IAAM,qBAAqB;;;AD4KhF;AA1JI,IAAM,sBAAkB,4BAAoC;AAAA,EAClE,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,mBAAmB,MAAM;AAAA,EAAC;AAC3B,CAAC;AACD,gBAAgB,cAAc;AAS9B,SAAS,wBAAwB,gBAA+C;AAC/E,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA2C,OAAO;AAAA,IAC3E,YAAY,OAAO,WAAW,8BAA8B,EAAE;AAAA,IAC9D,oBAAoB;AAAA,EACrB,EAAE;AAEF,QAAM,CAAC,qBAAqB,QAAI,uBAAS,MAAM;AAC9C,WAAO,sBAAsB,GAAG,oBAAoB,EAAE,OAAO;AAAA,EAC9D,CAAC;AAED,8BAAU,MAAM;AACf,UAAM,SAAS,sBAAsB,iBAAiB;AAAA,MACrD,QAAQ;AAAA,IACT,CAAC;AAED,WAAO,KAAK,QAAQ,EAAE,MAAM,cAAc;AAC1C,WAAO,MAAM,KAAK,OAAO,OAAO;AAAA,EACjC,GAAG,CAAC,qBAAqB,CAAC;AAE1B,QAAM,kBAAc;AAAA,IACnB,CAAC,cAAuB;AACvB,WAAK,sBAAsB,YAAY;AAAA,QACtC;AAAA,MACD,CAAC;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB;AAAA,EACvB;AAEA,QAAM,wBAAoB;AAAA,IACzB,CAAC,mBAA4B;AAC5B,WAAK,sBAAsB,kBAAkB;AAAA,QAC5C;AAAA,MACD,CAAC;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB;AAAA,EACvB;AAEA,aAAO;AAAA,IACN,OAAO;AAAA,MACN,YAAY,MAAM;AAAA,MAClB,oBAAoB,MAAM;AAAA,MAC1B;AAAA,MACA;AAAA,IACD;AAAA,IACA,CAAC,MAAM,YAAY,MAAM,oBAAoB,aAAa,iBAAiB;AAAA,EAC5E;AACD;AAIA,SAAS,qBAAqB,YAA8B;AAC3D,QAAM,eAAe,SACnB,cAAc,0DAA0D,UAAU,KAAK,GACtF,aAAa,YAAY;AAC5B,MAAI,CAAC,aAAc;AAEnB,QAAM,wBAAwB,SAAS,iBAAiB,0BAA0B;AAClF,wBAAsB,QAAQ,aAAW;AACxC,YAAQ,aAAa,WAAW,YAAY;AAAA,EAC7C,CAAC;AACF;AAEA,SAAS,uBAAuB,eAA8C;AAC7E,QAAM,CAAC,cAAc,eAAe,IAAI,4CAAkD,KAAK;AAC/F,QAAM,CAAC,oBAAoB,iBAAiB,IAAI,kEAAwD,KAAK;AAC7G,QAAM,iBAAiB,cAAc,8BAA8B;AAEnE,QAAM,aAAa,kBAAkB,qBAAqB,eAAe;AAEzE,QAAM,kBAAc;AAAA,IACnB,CAAC,cAAuB;AACvB,UAAI,cAAe;AACnB,sBAAgB,SAAS;AACzB,wBAAkB,IAAI;AAAA,IACvB;AAAA,IACA,CAAC,iBAAiB,mBAAmB,aAAa;AAAA,EACnD;AAEA,aAAO;AAAA,IACN,OAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA,CAAC,YAAY,oBAAoB,aAAa,iBAAiB;AAAA,EAChE;AACD;AAEA,IAAM,kBAAkB,WAAW,IAChC,0BACA;AAEI,SAAS,iBAAiB,EAAE,UAAU,gBAAgB,OAAO,sBAAsB,MAAM,GAAU;AACzG,QAAM,eAAe,gBAAgB,aAAa;AAElD,oCAAgB,MAAM;AACrB,UAAM,aAAa,aAAa;AAIhC,aAAS,KAAK,UAAU,IAAW,kBAAkB;AAKrD,aAAS,KAAK,UAAU,OAAO,qBAAqB,UAAU;AAC9D,aAAS,KAAK,aAAa,qBAAqB,aAAa,SAAS,OAAO;AAI7E,QAAI,qBAAqB;AACxB,eAAS,KAAK,UAAU,IAAI,OAAO;AAAA,IACpC,OAAO;AACN,eAAS,KAAK,UAAU,OAAO,OAAO;AAAA,IACvC;AAEA,yBAAqB,aAAa,SAAS,OAAO;AAKlD,0BAAsB,MAAM;AAC3B,eAAS,KAAK,UAAU,OAAc,kBAAkB;AAAA,IACzD,CAAC;AAED,UAAM,SAAS,OAAO;AACtB,aAAS,QAAQ,GAAG,QAAQ,OAAO,QAAQ,SAAS;AACnD,aAAO,KAAK,GAAG;AAAA,QACd;AAAA,UACC,YAAY,aAAa,SAAS;AAAA,QACnC;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,cAAc,mBAAmB,CAAC;AAEtC,SACC,4CAAC,gBAAgB,UAAhB,EAAyB,OAAO,cAChC,sDAAC,mBAAgB,SAAS,eAAe,GAAI,UAAS,GACvD;AAEF;",
  "names": []
}