73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { useAppearance } from '@/hooks/use-appearance';
|
|
import { Moon, Sun } from 'lucide-react';
|
|
import { HTMLAttributes, useEffect, useMemo, useState } from 'react';
|
|
|
|
export default function AppearanceToggleDropdown({ className = '', ...props }: HTMLAttributes<HTMLDivElement>) {
|
|
const { appearance, updateAppearance } = useAppearance();
|
|
const [prefersDark, setPrefersDark] = useState<boolean>(() => {
|
|
if (typeof window === 'undefined') {
|
|
return false;
|
|
}
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
});
|
|
const [documentLang, setDocumentLang] = useState<string>(() => (typeof document !== 'undefined' ? document.documentElement.lang ?? '' : ''));
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const handleChange = (event: MediaQueryListEvent) => setPrefersDark(event.matches);
|
|
setPrefersDark(media.matches);
|
|
media.addEventListener('change', handleChange);
|
|
|
|
return () => media.removeEventListener('change', handleChange);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (typeof document === 'undefined') return;
|
|
const observer = new MutationObserver(() => setDocumentLang(document.documentElement.lang ?? ''));
|
|
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const resolvedAppearance = appearance === 'system' ? (prefersDark ? 'dark' : 'light') : appearance;
|
|
const isDark = resolvedAppearance === 'dark';
|
|
const Icon = isDark ? Moon : Sun;
|
|
|
|
const { ariaLabel, title } = useMemo(() => {
|
|
const isGerman = documentLang.toLowerCase().startsWith('de');
|
|
if (isDark) {
|
|
return {
|
|
ariaLabel: isGerman ? 'Zum hellen Modus wechseln' : 'Switch to light mode',
|
|
title: isGerman ? 'Zum hellen Modus wechseln' : 'Switch to light mode',
|
|
};
|
|
}
|
|
return {
|
|
ariaLabel: isGerman ? 'Zum dunklen Modus wechseln' : 'Switch to dark mode',
|
|
title: isGerman ? 'Zum dunklen Modus wechseln' : 'Switch to dark mode',
|
|
};
|
|
}, [documentLang, isDark]);
|
|
|
|
const handleToggle = () => {
|
|
updateAppearance(isDark ? 'light' : 'dark');
|
|
};
|
|
|
|
return (
|
|
<div className={className} {...props}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-9 w-9 rounded-md"
|
|
type="button"
|
|
onClick={handleToggle}
|
|
aria-pressed={isDark}
|
|
aria-label={ariaLabel}
|
|
title={title}
|
|
>
|
|
<Icon className="h-5 w-5" aria-hidden />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|