38 lines
785 B
TypeScript
38 lines
785 B
TypeScript
import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
|
|
import { useTheme } from 'next-themes'
|
|
import { useEffect, useState } from 'react'
|
|
import { IconButton } from '../shared/Button'
|
|
|
|
const ThemeToggle = () => {
|
|
const [mounted, setMounted] = useState(false)
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
}, [])
|
|
|
|
if (!mounted) {
|
|
return null
|
|
}
|
|
|
|
const toggleTheme = () => {
|
|
if (theme === 'Mango') {
|
|
setTheme('Light')
|
|
} else {
|
|
setTheme('Mango')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<IconButton hideBg size="medium" onClick={toggleTheme}>
|
|
{theme === 'Mango' ? (
|
|
<MoonIcon className="h-5 w-5" />
|
|
) : (
|
|
<SunIcon className="h-5 w-5" />
|
|
)}
|
|
</IconButton>
|
|
)
|
|
}
|
|
|
|
export default ThemeToggle
|