[{"_1":2,"_179":-5,"_180":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","a45694a1faeed7a48e6b6123449288e884a42bca","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_154":155,"_176":177,"_178":-5},"handle","shapedlines","name","carmy","path","frontend/components/ThemeContext.tsx","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":73,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":116,"_118":-5,"_119":32,"_14":120,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":132,"_135":136,"_140":141,"_153":20},"id","75b56760-d3a6-11f0-86d1-42dde27851f2","createdAt",["D",1765137234131],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","7ed186b0-c78a-4757-a5b0-12c00ac89afa","pinnedFileId","b9153140-d3a9-11f0-8d63-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","e9195859-3c6b-4b40-bb3e-c11844477fdf","tursoName","tursoHostname","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_133":134},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlc2Q1A2eUFyNEdDeXBud0E0bFJyWlJVUzQifQ","org",{"_94":95,"_137":134,"_12":112,"_138":139},"avatar","tier","pro","branch",{"_142":143,"_96":44,"_102":144,"_145":103,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":97,"_152":95},"version",241,"75b5bdc8-d3a6-11f0-86d1-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":156,"_96":157,"_158":159,"_160":161,"_162":144,"_163":164,"_165":116,"_104":166,"_142":32,"_167":168,"_169":170,"_171":20,"_172":-5,"_98":173},"92752bfa-e793-11f0-91fb-42dde27851f2","ThemeContext.tsx","fileId","92752ca4-e793-11f0-91fb-42dde27851f2","parentId","b86d06aa-d3a9-11f0-b1e3-42dde27851f2","branchId","branchVersion",197,"latest",["D",1767328145101],"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { createContext, useContext, useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\nexport type ResolvedTheme = 'light' | 'dark';\n\ninterface ThemeContextValue {\n mode: ThemeMode;\n resolvedTheme: ResolvedTheme;\n setMode: (mode: ThemeMode) => void;\n toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext(undefined);\n\nconst STORAGE_KEY = 'carmy-theme';\n\nfunction getSystemTheme(): ResolvedTheme {\n if (typeof window === 'undefined') return 'light';\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\nfunction resolveTheme(mode: ThemeMode): ResolvedTheme {\n if (mode === 'system') {\n return getSystemTheme();\n }\n return mode;\n}\n\nfunction applyTheme(theme: ResolvedTheme) {\n if (theme === 'dark') {\n document.documentElement.setAttribute('data-theme', 'dark');\n } else {\n document.documentElement.removeAttribute('data-theme');\n }\n}\n\nexport function ThemeProvider({ children }: { children: React.ReactNode }) {\n // Initialize from localStorage or default to system\n const [mode, setModeState] = useState(() => {\n if (typeof window === 'undefined') return 'system';\n const stored = localStorage.getItem(STORAGE_KEY);\n if (stored === 'light' || stored === 'dark' || stored === 'system') {\n return stored;\n }\n return 'system';\n });\n\n const [resolvedTheme, setResolvedTheme] = useState(() => resolveTheme(mode));\n\n // Apply theme on mount and mode change\n useEffect(() => {\n const resolved = resolveTheme(mode);\n setResolvedTheme(resolved);\n applyTheme(resolved);\n }, [mode]);\n\n // Listen for system preference changes\n useEffect(() => {\n if (mode !== 'system') return;\n\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = (e: MediaQueryListEvent) => {\n const newTheme = e.matches ? 'dark' : 'light';\n setResolvedTheme(newTheme);\n applyTheme(newTheme);\n };\n\n mediaQuery.addEventListener('change', handler);\n return () => mediaQuery.removeEventListener('change', handler);\n }, [mode]);\n\n const setMode = useCallback((newMode: ThemeMode) => {\n setModeState(newMode);\n localStorage.setItem(STORAGE_KEY, newMode);\n }, []);\n\n const toggleTheme = useCallback(() => {\n const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';\n setMode(newTheme);\n }, [resolvedTheme, setMode]);\n\n return (\n \n {children}\n \n );\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (context === undefined) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n}\n\n// Icon components for theme toggle\nexport function SunIcon({ className = \"w-4 h-4\" }: { className?: string }) {\n return (\n \n );\n}\n\nexport function MoonIcon({ className = \"w-4 h-4\" }: { className?: string }) {\n return (\n \n );\n}\n\nexport function ComputerIcon({ className = \"w-4 h-4\" }: { className?: string }) {\n return (\n \n );\n}\n\n","deleted","label",[174,175,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/carmy/code/frontend/components/ThemeContext.tsx","extension","actionData","errors"]