ThemeController

Components for switching between daisyUI themes.

Import

import { ThemeController } from 'asterui'

Examples

Swap (Sun/Moon)

Toggle between light and dark themes with animated icons.

</>

import { ThemeController } from 'asterui'

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

export default App

Custom Themes

Use custom theme names for light and dark modes.

</>

import { ThemeController } from 'asterui'

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

export default App

With onChange Callback

Handle theme changes with a 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 (Multiple Themes)

Select from multiple themes using a dropdown menu.

</>

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 with Default Theme

Set a default selected theme for the dropdown.

</>

import { ThemeController } from 'asterui'

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

export default App

Dropdown with onChange

Handle theme selection changes.

</>

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

Toggle Switch

Simple toggle switch for light/dark theme.

</>

import { ThemeController } from 'asterui'

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

export default App

Toggle Sizes

Toggle switches in different sizes.

</>

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

Property	Description	Type	Default
lightTheme	Theme name for light mode	string	'light'
darkTheme	Theme name for dark mode	string	'dark'
defaultChecked	Initially checked (dark theme)	boolean	-
onChange	Callback when theme changes	(theme: string) => void	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

ThemeController.Dropdown

Property	Description	Type	Default
themes	Array of available theme names	string[]	-
defaultTheme	Initially selected theme	string	-
onChange	Callback when theme changes	(theme: string) => void	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

ThemeController.Toggle

Property	Description	Type	Default
lightTheme	Theme name for light mode	string	'light'
darkTheme	Theme name for dark mode	string	'dark'
defaultChecked	Initially checked (dark theme)	boolean	-
onChange	Callback when theme changes	(theme: string) => void	-
size	Toggle size	'xs' | 'sm' | 'md' | 'lg'	'md'
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• Swap uses checkbox pattern with animated sun/moon icons
• Toggle uses checkbox with aria-label for screen readers
• Dropdown uses radio inputs with aria-label for each theme option
• Theme changes are immediately visible across all components
• All variants are keyboard accessible