4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1449,'use client'; import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { applyTheme, readStoredMode, resolveTheme, watchSystemTheme, writeStoredMode, type ResolvedTheme, type ThemeMode, } from './theme'; export interface ThemeContextValue { /** What the user chose, including `system`. */ mode: ThemeMode; /** What that currently resolves to. Never `system`. */ theme: ResolvedTheme; setMode: (mode: ThemeMode) => void; /** Convenience for a two-state toggle button: light ⇄ dark, leaving `system`. */ toggle: () => void; /** * `false` during SSR and on the first client render; `true` afterwards. * * ## Why you need this * * `theme` is resolved from `localStorage` and `matchMedia`, neither of which * exists on the server. So the server always renders the `defaultMode` branch * while the client's very first render already knows the stored value , and if * they differ, React throws a hydration error (#418) and discards the server * HTML. * * Reading `theme` for *styling* is fine, because styling goes through the * `dark` class and CSS. This flag is for the case where **markup** differs: * * ```tsx * // WRONG , server says Moon, client says Sun, hydration fails * {theme === 'dark' ? : } * * // Better , no JS branch at all, CSS decides * * * * // When a JS branch is unavoidable * {mounted ? (theme === 'dark' ? : ) : } * ``` */ mounted: boolean; } const ThemeContext = createContext(null); export interface ThemeProviderProps { children: React.ReactNode; /** * Where the choice persists. REQUIRED and intentionally not defaulted , the * editor app uses `fmx_theme_mode` and the dashboard app uses `tf.theme`, both * with live user data, so a default here would silently orphan one app's * preferences. `THEME_STORAGE_KEYS` has the constants. */ storageKey: string; /** Used before anything is stored. */ defaultMode?: ThemeMode; /** * Called after every change, for consumers where the server is authoritative. * The editor app syncs the mode to its backend through RTK Query; the local * value is only a cache to prevent a flash on refresh. */ onModeChange?: (mode: ThemeMode) => void; /** * Skip writing to the DOM. For tests, and for a host that already owns the * `dark` class (the Keycloak theme applies it from `kcContext`). */ disableDomSync?: boolean; } export function ThemeProvider({ children, storageKey, defaultMode = 'system', onModeChange, disableDomSync = false, }: ThemeProviderProps) { /** * Initialised from storage in the state initialiser rather than in an effect. * An effect would render once with the default first, which is the flash this * exists to prevent. */ const [mode, setModeState] = useState(() => { if (typeof window === 'undefined') return defaultMode; const stored = readStoredMode(storageKey); return stored === 'system' && defaultMode !== 'system' ? defaultMode : stored; }); const [theme, setTheme] = useState(() => resolveTheme(mode)); /** * Deliberately set in an effect, so it is `false` for the server render AND * for the first client render , the two that must produce identical markup. */ const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); useEffect(() => { const next = resolveTheme(mode); setTheme(next); if (!disableDomSync) applyTheme(next); }, [mode, disableDomSync]); useEffect(() => { // Only follow the OS while the user has not made an explicit choice , // otherwise a system change would silently override them. if (mode !== 'system') return; return watchSystemTheme((next) => { setTheme(next); if (!disableDomSync) applyTheme(next); }); }, [mode, disableDomSync]); const setMode = useCallback( (next: ThemeMode) => { setModeState(next); writeStoredMode(storageKey, next); onModeChange?.(next); }, [storageKey, onModeChange], ); const toggle = useCallback(() => { // Resolve `system` against what is on screen, so the first click always // flips what the user is actually looking at. setMode(resolveTheme(mode) === 'dark' ? 'light' : 'dark'); }, [mode, setMode]); const value = useMemo( () => ({ mode, theme, setMode, toggle, mounted }), [mode, theme, setMode, toggle, mounted], ); return {children}; } /** * Throws when there is no `ThemeProvider` above it, deliberately: a silent * fallback to `light` is the kind of bug that only shows up in the one route * someone forgot to wrap. */ export function useTheme(): ThemeContextValue { const ctx = useContext(ThemeContext); if (!ctx) { throw new Error('useTheme must be used within a . See @velobitsio/ui docs.'); } return ctx; } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@velobits","registryDependencies":["https://ui.velobits.dev/r/theme.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/velobits/hooks/use-theme.tsx","content":"$50","type":"registry:hook","target":"@ui/velobits/use-theme.tsx"}],"className":"h-[70svh] min-h-80"}]]}]