ThemeController 主题控制器

用于在 daisyUI 主题之间切换的组件。

导入

import { ThemeController } from 'asterui'

示例

切换(太阳/月亮)

使用动画图标在明暗主题之间切换。

</>

import { ThemeController } from 'asterui'

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

export default App

自定义主题

为明暗模式使用自定义主题名称。

</>

import { ThemeController } from 'asterui'

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

export default App

带 onChange 回调

使用回调处理主题更改。

</>

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

下拉菜单(多个主题)

使用下拉菜单从多个主题中选择。

</>

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

带默认主题的下拉菜单

为下拉菜单设置默认选定的主题。

</>

import { ThemeController } from 'asterui'

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

export default App

带 onChange 的下拉菜单

处理主题选择更改。

</>

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

切换开关

用于明/暗主题的简单切换开关。

</>

import { ThemeController } from 'asterui'

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

export default App

切换尺寸

不同尺寸的切换开关。

</>

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

属性	描述	类型	默认值
lightTheme	亮色模式的主题名称	string	'light'
darkTheme	暗色模式的主题名称	string	'dark'
defaultChecked	初始勾选(暗色主题)	boolean	-
onChange	主题更改时的回调	(theme: string) => void	-
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

ThemeController.Dropdown

属性	描述	类型	默认值
themes	可用主题名称数组	string[]	-
defaultTheme	初始选定的主题	string	-
onChange	主题更改时的回调	(theme: string) => void	-
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

ThemeController.Toggle

属性	描述	类型	默认值
lightTheme	亮色模式的主题名称	string	'light'
darkTheme	暗色模式的主题名称	string	'dark'
defaultChecked	初始勾选(暗色主题)	boolean	-
onChange	主题更改时的回调	(theme: string) => void	-
size	切换大小	'xs' | 'sm' | 'md' | 'lg'	'md'
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

可访问性

• Swap 使用带有动画太阳/月亮图标的复选框模式
• Toggle 使用带有 aria-label 的复选框以供屏幕阅读器使用
• Dropdown 为每个主题选项使用带有 aria-label 的单选输入
• 主题更改立即在所有组件中可见
• 所有变体都可通过键盘访问