ThemeController

Componentes para cambiar entre temas de daisyUI.

Importación

import { ThemeController } from 'asterui'

Ejemplos

Intercambio (Sol/Luna)

Alterna entre temas claro y oscuro con iconos animados.

</>

import { ThemeController } from 'asterui'

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

export default App

Temas Personalizados

Usa nombres de tema personalizados para modos claro y oscuro.

</>

import { ThemeController } from 'asterui'

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

export default App

Con Callback onChange

Maneja cambios de tema con 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

Desplegable (Múltiples Temas)

Selecciona entre múltiples temas usando un menú desplegable.

</>

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

Desplegable con Tema Predeterminado

Establece un tema seleccionado predeterminado para el desplegable.

</>

import { ThemeController } from 'asterui'

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

export default App

Desplegable con onChange

Maneja cambios de selección de tema.

</>

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

Interruptor Toggle

Interruptor toggle simple para tema claro/oscuro.

</>

import { ThemeController } from 'asterui'

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

export default App

Tamaños de Toggle

Interruptores toggle en diferentes tamaños.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
lightTheme	Nombre del tema para modo claro	string	'light'
darkTheme	Nombre del tema para modo oscuro	string	'dark'
defaultChecked	Inicialmente marcado (tema oscuro)	boolean	-
onChange	Callback cuando cambia el tema	(theme: string) => void	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

ThemeController.Dropdown

Propiedad	Descripción	Tipo	Predeterminado
themes	Array de nombres de tema disponibles	string[]	-
defaultTheme	Tema seleccionado inicialmente	string	-
onChange	Callback cuando cambia el tema	(theme: string) => void	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

ThemeController.Toggle

Propiedad	Descripción	Tipo	Predeterminado
lightTheme	Nombre del tema para modo claro	string	'light'
darkTheme	Nombre del tema para modo oscuro	string	'dark'
defaultChecked	Inicialmente marcado (tema oscuro)	boolean	-
onChange	Callback cuando cambia el tema	(theme: string) => void	-
size	Tamaño del toggle	'xs' | 'sm' | 'md' | 'lg'	'md'
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Swap usa patrón de checkbox con iconos animados de sol/luna
• Toggle usa checkbox con aria-label para lectores de pantalla
• Dropdown usa inputs de radio con aria-label para cada opción de tema
• Los cambios de tema son inmediatamente visibles en todos los componentes
• Todas las variantes son accesibles por teclado