useTheme

Hook pour détecter et contrôler le thème actuel. Supporte la détection des préférences système, la persistance du thème et fournit des couleurs calculées pour les composants basés sur canvas.

Import

import { useTheme, ThemeProvider } from 'asterui'

Utilisation

Avec ThemeProvider (Recommandé)

Enveloppez votre application avec ThemeProvider pour activer le contrôle complet du thème :

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>Sélectionné : {theme}</p>
      <p>Appliqué : {resolvedTheme}</p>
      <p>Mode : {isDark ? 'Sombre' : 'Clair'}</p>

      <button onClick={() => setTheme('light')}>Clair</button>
      <button onClick={() => setTheme('dark')}>Sombre</button>
      <button onClick={() => setTheme('system')}>Système</button>
    </div>
  )
}

Autonome (Sans ThemeProvider)

Sans provider, useTheme fournit un accès en lecture seule à l’état du thème :

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

  return (
    <div style={{ background: colors.background, color: colors.foreground }}>
      Mode actuel : {isDark ? 'Sombre' : 'Clair'}
    </div>
  )
}

Exemple 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('Bonjour', 10, 50)
  }, [colors])

  return <canvas ref={canvasRef} />
}

Voir ThemeProvider pour les props du fournisseur et les options de configuration.

Valeur de Retour de useTheme

Propriété	Type	Description
theme	string | undefined	Le thème sélectionné (ex., 'system', 'light', 'dark'). Uniquement avec ThemeProvider.
resolvedTheme	string | undefined	Le thème appliqué après résolution de 'system'. Uniquement avec ThemeProvider.
isDark	boolean	true si le mode sombre est actif.
setTheme	(theme: string) => void | undefined	Fonction pour changer le thème. Uniquement avec ThemeProvider.
colors	ThemeColors	Couleurs du thème calculées en valeurs hex.
systemTheme	'light' | 'dark' | undefined	La préférence système. Uniquement avec ThemeProvider.

ThemeColors

Propriété	Type	Description
background	string	Couleur de fond de base (DaisyUI base-100)
foreground	string	Couleur de texte de base (DaisyUI base-content)
primary	string	Couleur primaire
primaryContent	string	Couleur de contenu primaire
secondary	string	Couleur secondaire
accent	string	Couleur d’accentuation
info	string	Couleur d’information
success	string	Couleur de succès
warning	string	Couleur d’avertissement
error	string	Couleur d’erreur

Fonctionnalités

• Détection des Préférences Système : Détecte automatiquement prefers-color-scheme: dark
• Persistance : Sauvegarde la préférence utilisateur dans localStorage (configurable)
• Synchronisation Inter-Onglets : Les changements de thème se synchronisent entre les onglets
• Tous les Thèmes DaisyUI : Fonctionne avec les 30+ thèmes intégrés
• Mises à Jour Réactives : Se met à jour automatiquement quand le thème ou la préférence système change
• Support Canvas : Fournit des couleurs hex pour les contextes canvas/WebGL