68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import * as React from 'react'
|
||
|
|
import { useTheme } from 'next-themes'
|
||
|
|
import { Button } from '@/components/ui/button'
|
||
|
|
|
||
|
|
export function ThemeToggle() {
|
||
|
|
const { theme, setTheme } = useTheme()
|
||
|
|
const [mounted, setMounted] = React.useState(false)
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
setMounted(true)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
if (!mounted) {
|
||
|
|
return (
|
||
|
|
<Button variant="ghost" size="icon-sm">
|
||
|
|
<span className="size-4" />
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon-sm"
|
||
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||
|
|
aria-label="Toggle theme"
|
||
|
|
>
|
||
|
|
{theme === 'dark' ? (
|
||
|
|
<svg
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeWidth="2"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="12" r="4" />
|
||
|
|
<path d="M12 2v2" />
|
||
|
|
<path d="M12 20v2" />
|
||
|
|
<path d="m4.93 4.93 1.41 1.41" />
|
||
|
|
<path d="m17.66 17.66 1.41 1.41" />
|
||
|
|
<path d="M2 12h2" />
|
||
|
|
<path d="M20 12h2" />
|
||
|
|
<path d="m6.34 17.66-1.41 1.41" />
|
||
|
|
<path d="m19.07 4.93-1.41 1.41" />
|
||
|
|
</svg>
|
||
|
|
) : (
|
||
|
|
<svg
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeWidth="2"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
>
|
||
|
|
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
|
||
|
|
</svg>
|
||
|
|
)}
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|