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

## Ejemplo

```tsx
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).