ThemeController

Componentes para alternar entre temas do daisyUI.

Importação

import { ThemeController } from 'asterui'

Exemplos

Troca (Sol/Lua)

Alterne entre temas claro e escuro com ícones animados.

</>

import { ThemeController } from 'asterui'

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

export default App

Temas Personalizados

Use nomes de tema personalizados para modos claro e escuro.

</>

import { ThemeController } from 'asterui'

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

export default App

Com Callback onChange

Manipule mudanças de tema com um 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

Dropdown (Múltiplos Temas)

Selecione entre múltiplos temas usando um menu dropdown.

</>

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

Dropdown com Tema Padrão

Defina um tema padrão selecionado para o dropdown.

</>

import { ThemeController } from 'asterui'

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

export default App

Dropdown com onChange

Manipule mudanças de seleção 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 simples para tema claro/escuro.

</>

import { ThemeController } from 'asterui'

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

export default App

Tamanhos de Toggle

Interruptores toggle em diferentes tamanhos.

</>

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

Propriedade	Descrição	Tipo	Padrão
lightTheme	Nome do tema para modo claro	string	'light'
darkTheme	Nome do tema para modo escuro	string	'dark'
defaultChecked	Inicialmente marcado (tema escuro)	boolean	-
onChange	Callback quando o tema muda	(theme: string) => void	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

ThemeController.Dropdown

Propriedade	Descrição	Tipo	Padrão
themes	Array de nomes de tema disponíveis	string[]	-
defaultTheme	Tema selecionado inicialmente	string	-
onChange	Callback quando o tema muda	(theme: string) => void	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

ThemeController.Toggle

Propriedade	Descrição	Tipo	Padrão
lightTheme	Nome do tema para modo claro	string	'light'
darkTheme	Nome do tema para modo escuro	string	'dark'
defaultChecked	Inicialmente marcado (tema escuro)	boolean	-
onChange	Callback quando o tema muda	(theme: string) => void	-
size	Tamanho do toggle	'xs' | 'sm' | 'md' | 'lg'	'md'
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Swap usa padrão de checkbox com ícones animados de sol/lua
• Toggle usa checkbox com aria-label para leitores de tela
• Dropdown usa inputs de rádio com aria-label para cada opção de tema
• Mudanças de tema são imediatamente visíveis em todos os componentes
• Todas as variantes são acessíveis por teclado