73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
'use client';
|
|
import { useTheme } from 'next-themes';
|
|
import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type Theme = 'dark' | 'light' | 'system';
|
|
|
|
interface ThemeSwitcherProps {
|
|
size?: number | string;
|
|
className?: string;
|
|
}
|
|
|
|
export function ThemeSwitcher({ size, className }: ThemeSwitcherProps) {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
const isTheme = useCallback((t: Theme) => t === theme, [theme]);
|
|
|
|
const handleThemeSwitch = (theme: Theme) => {
|
|
setTheme(theme);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isTheme('system')) {
|
|
const preferDarkScheme = window.matchMedia(
|
|
'(prefers-color-scheme: dark)',
|
|
);
|
|
|
|
const detectThemeChange = (event: MediaQueryListEvent) => {
|
|
const theme: Theme = event.matches ? 'dark' : 'light';
|
|
setTheme(theme);
|
|
};
|
|
|
|
preferDarkScheme.addEventListener('change', detectThemeChange);
|
|
|
|
return () => {
|
|
preferDarkScheme.removeEventListener('change', detectThemeChange);
|
|
};
|
|
}
|
|
}, [isTheme, setTheme, theme]);
|
|
|
|
// Avoid Hydration Mismatch
|
|
if (!mounted) {
|
|
return null;
|
|
}
|
|
|
|
return isTheme('dark') ? (
|
|
<SunIcon
|
|
className={cn('cursor-pointer', className)}
|
|
size={size}
|
|
onClick={() => handleThemeSwitch('light')}
|
|
/>
|
|
) : isTheme('light') ? (
|
|
<MoonIcon
|
|
className={cn('cursor-pointer', className)}
|
|
size={size}
|
|
onClick={() => handleThemeSwitch('dark')}
|
|
/>
|
|
) : (
|
|
<MonitorIcon
|
|
className={cn('cursor-pointer', className)}
|
|
size={size}
|
|
onClick={() => handleThemeSwitch('system')}
|
|
/>
|
|
);
|
|
}
|