Files
fn_registry/frontend/functions/ui/theme_provider.md
T
egutierrez 988e901066 docs: params/output semántico en 506 funciones para composabilidad
Añade campos params y output al frontmatter YAML de las 506 funciones del registry.
Cada parámetro tiene descripción semántica (qué representa, unidades, rango típico)
y cada función describe qué produce su output. Permite a agentes razonar sobre
cadenas de composición (ej: prices → log_return → sharpe_ratio) sin leer código.
2026-04-05 18:45:16 +02:00

1.9 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, 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 output 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
Componente ThemeProvider que renderiza context de tema con persistencia en localStorage y hook useTheme 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).