'use client'
import {useEffect, useState} from 'react'
import {useTheme} from 'next-themes'
import {SunIcon} from '@/components/icons/SunIcon'
import {MoonIcon} from '@/components/icons/MoonIcon'
export function ThemeButton() {
const [mounted, setMounted] = useState(false)
const {theme, setTheme} = useTheme()
useEffect(() => {
const timeout = setTimeout(() => setMounted(true), 500)
return () => clearTimeout(timeout)
}, [])
function toggleTheme() {
let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
let isSystemDarkMode = darkModeMediaQuery.matches
let isDarkMode = theme === 'dark'
if (isDarkMode === isSystemDarkMode) {
setTheme('light')
} else {
setTheme('dark')
}
}
if (!mounted) return
return (
)
}
ThemeButton.Skeleton = function ThemeButtonSkeleton() {
return (
)
}