useThemePro

基于useTheme封装，增加切换主题动画的hook。

基础用法

import { useThemePro, ThemeType } from 'ono-react-element'

function App() {
    const [theme, changeTheme] = useThemePro({ initTheme: 'dark' })

    return (
        <div style={{ width: '100vw' }}>
            <h1>当前主题：{theme}</h1>
            <Button
              onClick={e =>
                changeTheme({ targetTheme: 'dark', element: e.currentTarget })
              }
            >
              切换主题（dark）
            </Button>
            <Button
              onClick={e =>
                changeTheme({ targetTheme: 'light', element: e.currentTarget })
              }
            >
              切换主题（light）
            </Button>
            <Button
              onClick={e =>
                changeTheme({ targetTheme: 'system', element: e.currentTarget })
              }
            >
              切换主题（system）
            </Button>
        </div>
    )
}

export default App

API

通用属性参考：通用属性

参数	说明	类型	默认值	是否必填
initTheme	初始主题	ThemeType	'light'	否
themeRules	主题规则	(isDark: boolean) => void	(isDark: boolean) => isDark ? document.documentElement.classList.add('dark') : document.documentElement.classList.remove('dark')	否

ThemeType

参数	说明	类型	默认值	是否必填
ThemeType	主题类型	'light'|'dark'|'system'	-	是