55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { Moon, Sun } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { useTheme } from '@/components/theme-provider'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export function ThemeToggle() {
|
|
const { theme, setTheme } = useTheme()
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
}, [])
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<Button variant="ghost" size="icon" disabled>
|
|
<Sun className="h-5 w-5" />
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
const toggleTheme = () => {
|
|
if (theme === 'system') {
|
|
// If system, first switch to light/dark based on current system preference
|
|
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
setTheme(isDark ? 'light' : 'dark')
|
|
} else {
|
|
setTheme(theme === 'light' ? 'dark' : 'light')
|
|
}
|
|
}
|
|
|
|
const getIcon = () => {
|
|
if (theme === 'system') {
|
|
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
return isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />
|
|
}
|
|
return theme === 'light' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={toggleTheme}
|
|
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
|
|
>
|
|
{getIcon()}
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
)
|
|
}
|