49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Moon, Sun } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
export function ThemeToggle() {
|
|
const [theme, setTheme] = useState<'light' | 'dark'>('dark')
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
const stored = localStorage.getItem('theme') as 'light' | 'dark' | null
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
const initialTheme = stored || (prefersDark ? 'dark' : 'light')
|
|
setTheme(initialTheme)
|
|
}, [])
|
|
|
|
const toggleTheme = () => {
|
|
const newTheme = theme === 'dark' ? 'light' : 'dark'
|
|
setTheme(newTheme)
|
|
localStorage.setItem('theme', newTheme)
|
|
document.documentElement.classList.toggle('dark', newTheme === 'dark')
|
|
}
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<Button variant="ghost" size="icon" className="size-9 text-muted-foreground">
|
|
<span className="sr-only">Theme umschalten</span>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={toggleTheme}
|
|
className="size-9 text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label={theme === 'dark' ? 'Zum hellen Modus wechseln' : 'Zum dunklen Modus wechseln'}
|
|
>
|
|
{theme === 'dark' ? (
|
|
<Sun className="size-5" />
|
|
) : (
|
|
<Moon className="size-5" />
|
|
)}
|
|
</Button>
|
|
)
|
|
}
|