39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Moon, Sun } from "lucide-react"
|
|
import { useTheme } from "next-themes"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
/**
|
|
* Renders an empty slot until mounted: `resolvedTheme` is unknown on the server (and on
|
|
* the client's first paint, before next-themes reads localStorage), so rendering an icon
|
|
* before that would either be wrong or cause a hydration mismatch.
|
|
*/
|
|
export function ThemeToggle({ className }: { className?: string }) {
|
|
const { resolvedTheme, setTheme } = useTheme()
|
|
const [mounted, setMounted] = useState(false)
|
|
useEffect(() => setMounted(true), [])
|
|
|
|
if (!mounted) {
|
|
return <div className={cn("size-10 shrink-0", className)} aria-hidden="true" />
|
|
}
|
|
|
|
const isDark = resolvedTheme === "dark"
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => setTheme(isDark ? "light" : "dark")}
|
|
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
|
className={cn(
|
|
"flex size-10 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
className
|
|
)}
|
|
>
|
|
{isDark ? <Sun className="size-5" /> : <Moon className="size-5" />}
|
|
</button>
|
|
)
|
|
}
|