fn_registry/frontend/functions/ui/theme_provider.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, source_repo, source_license, source_file

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant	source_repo	source_license	source_file
theme_provider	component	ts	ui	1.0.0	impure	ThemeProvider(props: { children: ReactNode; themes: Record<string, Theme>; defaultTheme?: string }): JSX.Element	Provider de tema React con context, persistencia en localStorage, detección de preferencia del sistema y hook useTheme.	theme provider context hook component ui	apply_theme_ts_ui	ThemeConfig_ts_ui		false		react	false			frontend/functions/ui/theme_provider.tsx	name type required description themes Record<string, Theme> true Mapa de temas disponibles name type required description defaultTheme string false Nombre del tema por defecto name type required description children ReactNode true Contenido de la app		true	react	default	https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library	MIT	frontend/src/hooks/use-theme.tsx

Ejemplo

import { ThemeProvider, useTheme } from './theme_provider'

<ThemeProvider themes={allThemes} defaultTheme="dark">
  <App />
</ThemeProvider>

// Dentro de un componente:
function ThemeSwitcher() {
  const { themeName, setTheme, themes } = useTheme()
  return (
    <select value={themeName} onChange={(e) => setTheme(e.target.value)}>
      {Object.values(themes).map(t => <option key={t.name} value={t.name}>{t.label}</option>)}
    </select>
  )
}

Notas

Detecta prefers-color-scheme automáticamente. Persiste elección en localStorage. Exporta ThemeProvider (componente) y useTheme (hook).