Skip to content

Commit

Permalink
feat(ux/ui): create toggle theme button component
Browse files Browse the repository at this point in the history
  • Loading branch information
mateusfg7 committed Mar 28, 2023
1 parent f580f46 commit 1813f47
Showing 1 changed file with 32 additions and 0 deletions.
32 changes: 32 additions & 0 deletions src/components/ToggleTheme.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
'use client'

import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'
import { FiMoon, FiSun } from 'react-icons/fi'

export const ToggleTheme = () => {
const [mounted, setMounted] = useState(false)

const { setTheme, resolvedTheme } = useTheme()

const isLight = resolvedTheme === 'light'
const oppositeTheme = isLight ? 'dark' : 'light'

const toggleTheme = () => setTheme(oppositeTheme)

useEffect(() => {
setMounted(true)
}, [])

if (!mounted) return null

return (
<button onClick={toggleTheme} className="p-1">
{isLight ? (
<FiMoon className="text-xl" title="Dark mode" />
) : (
<FiSun className="text-xl" title="Light mode" />
)}
</button>
)
}

0 comments on commit 1813f47

Please sign in to comment.