Contrôleur de thème

Composants pour basculer entre les thèmes daisyUI.

Importation

import { ThemeController } from 'asterui'

Exemples

Permutation (Soleil/Lune)

Basculer entre les thèmes clair et sombre avec des icônes animées.

</>

import { ThemeController } from 'asterui'

function App() {
  return (
      <ThemeController.Swap />
    )
}

export default App

Thèmes personnalisés

Utiliser des noms de thèmes personnalisés pour les modes clair et sombre.

</>

import { ThemeController } from 'asterui'

function App() {
  return (
      <ThemeController.Swap lightTheme="cupcake" darkTheme="dracula" />
    )
}

export default App

Avec callback onChange

Gérer les changements de thème avec un callback.

</>

import { ThemeController, Modal } from 'asterui'

function App() {
  return (
      <ThemeController.Swap
        onChange={(theme) => {
          Modal.info({ title: 'Theme Changed', content: `Theme changed to: ${theme}` });
        }}
      />
    )
}

export default App

Menu déroulant (Thèmes multiples)

Sélectionner parmi plusieurs thèmes en utilisant un menu déroulant.

</>

import { ThemeController } from 'asterui'

function App() {
  return (
      <ThemeController.Dropdown
        themes={[
          'light',
          'dark',
          'cupcake',
          'bumblebee',
          'emerald',
          'corporate',
          'synthwave',
          'retro',
          'cyberpunk',
          'valentine',
          'halloween',
          'garden',
          'forest',
          'aqua',
          'lofi',
          'pastel',
          'fantasy',
          'wireframe',
          'black',
          'luxury',
          'dracula',
        ]}
      />
    )
}

export default App

Menu déroulant avec thème par défaut

Définir un thème sélectionné par défaut pour le menu déroulant.

</>

import { ThemeController } from 'asterui'

function App() {
  return (
      <ThemeController.Dropdown
        themes={['light', 'dark', 'synthwave', 'retro', 'cyberpunk']}
        defaultTheme="synthwave"
      />
    )
}

export default App

Menu déroulant avec onChange

Gérer les changements de sélection de thème.

</>

import { ThemeController, Modal } from 'asterui'

function App() {
  return (
      <ThemeController.Dropdown
        themes={['light', 'dark', 'cupcake', 'dracula']}
        onChange={(theme) => {
          Modal.info({ title: 'Theme Selected', content: `Selected theme: ${theme}` });
        }}
      />
    )
}

export default App

Interrupteur à bascule

Interrupteur simple pour le thème clair/sombre.

</>

import { ThemeController } from 'asterui'

function App() {
  return (
      <ThemeController.Toggle />
    )
}

export default App

Tailles d'interrupteur

Interrupteurs à bascule en différentes tailles.

</>

import { ThemeController, Space } from 'asterui'

function App() {
  return (
      <Space>
        <ThemeController.Toggle size="xs" />
        <ThemeController.Toggle size="sm" />
        <ThemeController.Toggle size="md" />
        <ThemeController.Toggle size="lg" />
      </Space>
    )
}

export default App

API

ThemeController.Swap

Propriété	Description	Type	Défaut
lightTheme	Nom du thème pour le mode clair	string	'light'
darkTheme	Nom du thème pour le mode sombre	string	'dark'
defaultChecked	Initialement coché (thème sombre)	boolean	-
onChange	Callback lorsque le thème change	(theme: string) => void	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

ThemeController.Dropdown

Propriété	Description	Type	Défaut
themes	Tableau des noms de thèmes disponibles	string[]	-
defaultTheme	Thème initialement sélectionné	string	-
onChange	Callback lorsque le thème change	(theme: string) => void	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

ThemeController.Toggle

Propriété	Description	Type	Défaut
lightTheme	Nom du thème pour le mode clair	string	'light'
darkTheme	Nom du thème pour le mode sombre	string	'dark'
defaultChecked	Initialement coché (thème sombre)	boolean	-
onChange	Callback lorsque le thème change	(theme: string) => void	-
size	Taille de l’interrupteur	'xs' | 'sm' | 'md' | 'lg'	'md'
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Swap utilise le modèle de case à cocher avec des icônes soleil/lune animées
• Toggle utilise une case à cocher avec aria-label pour les lecteurs d’écran
• Dropdown utilise des entrées radio avec aria-label pour chaque option de thème
• Les changements de thème sont immédiatement visibles sur tous les composants
• Toutes les variantes sont accessibles au clavier