useTheme

Hook para detectar y controlar el tema actual. Soporta detección de preferencia del sistema, persistencia de tema y proporciona colores calculados para componentes basados en canvas.

Importación

import { useTheme, ThemeProvider } from 'asterui'

Uso

Con ThemeProvider (Recomendado)

Envuelve tu aplicación con ThemeProvider para habilitar el control completo del tema:

main.tsx

import { ThemeProvider } from 'asterui'

createRoot(document.getElementById('root')!).render(
  <ThemeProvider defaultTheme="system">
    <App />
  </ThemeProvider>
)

App.tsx

function App() {
  const { theme, setTheme, resolvedTheme, isDark, colors } = useTheme()

  return (
    <div>
      <p>Seleccionado: {theme}</p>
      <p>Aplicado: {resolvedTheme}</p>
      <p>Modo: {isDark ? 'Oscuro' : 'Claro'}</p>

      <button onClick={() => setTheme('light')}>Claro</button>
      <button onClick={() => setTheme('dark')}>Oscuro</button>
      <button onClick={() => setTheme('system')}>Sistema</button>
    </div>
  )
}

Independiente (Sin ThemeProvider)

Cuando se usa sin un proveedor, useTheme proporciona acceso de solo lectura al estado del tema:

function ThemeAwareComponent() {
  const { isDark, colors } = useTheme()

  return (
    <div style={{ background: colors.background, color: colors.foreground }}>
      Modo actual: {isDark ? 'Oscuro' : 'Claro'}
    </div>
  )
}

Ejemplo con Canvas

function CanvasComponent() {
  const { colors } = useTheme()
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const ctx = canvasRef.current?.getContext('2d')
    if (!ctx) return
    ctx.fillStyle = colors.background
    ctx.fillRect(0, 0, 100, 100)
    ctx.fillStyle = colors.primary
    ctx.fillText('Hola', 10, 50)
  }, [colors])

  return <canvas ref={canvasRef} />
}

Ver ThemeProvider para las props del proveedor y opciones de configuración.

Valor de Retorno de useTheme

Propiedad	Tipo	Descripción
theme	string | undefined	El tema seleccionado (ej., 'system', 'light', 'dark'). Solo con ThemeProvider.
resolvedTheme	string | undefined	El tema aplicado después de resolver 'system'. Solo con ThemeProvider.
isDark	boolean	true si el modo oscuro está activo.
setTheme	(theme: string) => void | undefined	Función para cambiar el tema. Solo con ThemeProvider.
colors	ThemeColors	Colores del tema calculados como valores hex.
systemTheme	'light' | 'dark' | undefined	La preferencia del sistema. Solo con ThemeProvider.

ThemeColors

Propiedad	Tipo	Descripción
background	string	Color de fondo base (DaisyUI base-100)
foreground	string	Color de texto base (DaisyUI base-content)
primary	string	Color primario
primaryContent	string	Color de contenido primario
secondary	string	Color secundario
accent	string	Color de acento
info	string	Color de información
success	string	Color de éxito
warning	string	Color de advertencia
error	string	Color de error

Características

• Detección de Preferencia del Sistema: Detecta automáticamente prefers-color-scheme: dark
• Persistencia: Guarda la preferencia del usuario en localStorage (configurable)
• Sincronización entre Pestañas: Los cambios de tema se sincronizan entre pestañas del navegador
• Cualquier Tema DaisyUI: Funciona con los más de 30 temas incorporados
• Actualizaciones Reactivas: Se actualiza automáticamente cuando cambia el tema o la preferencia del sistema
• Soporte para Canvas: Proporciona colores hex para contextos canvas/WebGL