Template
26 lines
748 B
TypeScript
26 lines
748 B
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Moon, Sun } from 'lucide-react';
|
|
import { useTheme } from 'next-themes';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export function ThemeToggle() {
|
|
const { resolvedTheme, setTheme } = useTheme();
|
|
const [mounted, setMounted] = React.useState(false);
|
|
|
|
React.useEffect(() => setMounted(true), []);
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label={mounted && resolvedTheme === 'dark' ? 'Use light theme' : 'Use dark theme'}
|
|
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
|
|
>
|
|
{mounted && resolvedTheme === 'dark' ? <Sun aria-hidden="true" /> : <Moon aria-hidden="true" />}
|
|
</Button>
|
|
);
|
|
}
|