Files
NotionNext/themes/game/components/DarkModeButton.js
2024-03-20 18:40:06 +08:00

32 lines
694 B
JavaScript

import { useGlobal } from '@/lib/global'
import { useImperativeHandle } from 'react'
/**
* 深色模式按钮
*/
const DarkModeButton = props => {
const { cRef, className } = props
const { isDarkMode, toggleDarkMode } = useGlobal()
/**
* 对外暴露方法
*/
useImperativeHandle(cRef, () => {
return {
handleChangeDarkMode: () => {
toggleDarkMode()
}
}
})
return (
<div
onClick={toggleDarkMode}
className={`${className || ''} flex items-center`}>
<i className={`fas mr-2 ${isDarkMode ? 'fa-sun' : 'fa-moon px-0.5'}`} />
{isDarkMode ? 'Dark Mode' : 'Light Mode'}{' '}
</div>
)
}
export default DarkModeButton