Theme Controller

Apresentação

O ThemeController é um input que altera o tema DaisyUI da aplicação. Ao ser marcado, o tema informado em value passa a valer para toda a página, sem necessidade de código adicional de troca de tema.

Quando usar

• Para oferecer alternância entre tema claro e escuro
• Para permitir que o usuário escolha entre vários temas
• Em telas de configuração ou preferências

Forma básica de uso

import { ThemeController } from 'eitri-luminus';
import { useState } from 'react';

// Alternância entre dois temas (checkbox)
const [dark, setDark] = useState(false);

<ThemeController
  value="synthwave"
  checked={dark}
  onChange={() => setDark(!dark)}
  label="Tema escuro"
  className="toggle"
/>

// Seleção entre vários temas (radio)
const [theme, setTheme] = useState('light');

<>
  <ThemeController
    type="radio"
    name="theme-buttons"
    value="light"
    checked={theme === 'light'}
    onChange={() => setTheme('light')}
    label="Claro"
    className="btn btn-sm"
  />
  <ThemeController
    type="radio"
    name="theme-buttons"
    value="dark"
    checked={theme === 'dark'}
    onChange={() => setTheme('dark')}
    label="Escuro"
    className="btn btn-sm"
  />
</>

Propriedades

Propriedade	Tipo	Descrição
value	string	Nome do tema DaisyUI aplicado quando marcado (padrão: synthwave)
checked	boolean	Define se o controle está marcado (padrão: false)
onChange	() => void	Função chamada quando o usuário altera o controle
type	string	Tipo do input: checkbox para alternância ou radio para seleção (padrão: checkbox)
name	string	Nome do grupo, necessário para agrupar controles do tipo radio
label	string	Texto de acessibilidade, aplicado como aria-label
className	string	Classes CSS adicionais, aplicadas junto da classe theme-controller
id	string	Identificador único do componente

Heranças

O componente ThemeController herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• É um componente controlado: checked e onChange devem ser gerenciados pelo estado da aplicação
• A aparência vem inteiramente do className — combine com classes como toggle, checkbox, btn ou swap do DaisyUI
• Para o tipo radio, todos os controles do grupo precisam compartilhar o mesmo name
• O tema informado em value precisa estar habilitado na configuração do DaisyUI do projeto
• O estado do tema não é persistido; para lembrar a escolha do usuário, guarde o valor com o storage do Bifrost