项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。开发迭代中,请勿用于生产环境。
Skip to content
仅桌面端保证样式

ThemeToggle 主题切换 ​

EvThemeToggle 是明暗主题切换按钮,内部基于 useTheme:点击切换 html.dark 类驱动全库令牌重映射, 日/月图标随状态变化。主题偏好写入 localStorage(key ev-theme),首次访问跟随系统。

基础用法 ​

在导航栏中使用
点击切换本站主题,注意页面所有组件与文档界面同步换肤。
vue
<EvNavbar logo-text="cumubase" :items="navItems">
  <template #actions>
    <EvThemeToggle />
  </template>
</EvNavbar>

底层 API

需要自定义切换逻辑时直接使用组合式 API:

js
import { useTheme } from '@wil-works/evoke-ui'
const { isDark, toggleTheme, setTheme } = useTheme()
setTheme(true)  // 显式切暗色

API ​

Props ​

属性说明类型默认值
variant按钮变体(同 EvIconButton)'ghost' | 'soft' | 'outline' | 'primary' | 'dark''ghost'
size尺寸'small' | 'default' | 'large''default'
round正圆形态booleanfalse

基于 MIT 许可证发布