32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
import Icon from '@/components/site/icon';
|
|
import { common } from '@/content/common';
|
|
import { useAppearance } from '@/hooks/use-appearance';
|
|
import { useContent } from '@/hooks/use-locale';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/** Switches the whole app between light and dark mode. */
|
|
export default function ThemeToggle({ className }: { className?: string }) {
|
|
const t = useContent(common);
|
|
const { resolvedAppearance, updateAppearance } = useAppearance();
|
|
const isDark = resolvedAppearance === 'dark';
|
|
const label = isDark ? t.header.toLight : t.header.toDark;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => updateAppearance(isDark ? 'light' : 'dark')}
|
|
aria-label={label}
|
|
title={label}
|
|
className={cn(
|
|
'border-outline-variant/50 bg-surface-container-low text-on-surface hover:border-primary/60 hover:text-primary inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl border transition-colors',
|
|
className,
|
|
)}
|
|
>
|
|
<Icon
|
|
name={isDark ? 'light_mode' : 'dark_mode'}
|
|
className="text-xl"
|
|
/>
|
|
</button>
|
|
);
|
|
}
|