48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import { Moon, Sun } from 'lucide-react';
|
||
|
|
import { applyTheme, getStoredTheme, type ThemeMode } from '@/lib/theme';
|
||
|
|
|
||
|
|
export function ThemeToggle() {
|
||
|
|
const [mode, setMode] = useState<ThemeMode | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setMode(getStoredTheme());
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleClick = () => {
|
||
|
|
const current = getStoredTheme();
|
||
|
|
const next: ThemeMode = current === 'dark' ? 'light' : 'dark';
|
||
|
|
applyTheme(next);
|
||
|
|
setMode(next);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (mode === null) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className="inline-flex h-9 w-9 shrink-0 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80"
|
||
|
|
aria-hidden
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const isDark = mode === 'dark';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={handleClick}
|
||
|
|
className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80 text-text-primary hover:border-border-strong hover:bg-background-card/80 transition-colors"
|
||
|
|
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
|
||
|
|
title={isDark ? 'Light mode' : 'Dark mode'}
|
||
|
|
>
|
||
|
|
{isDark ? (
|
||
|
|
<Sun className="h-[18px] w-[18px] icon-flat" />
|
||
|
|
) : (
|
||
|
|
<Moon className="h-[18px] w-[18px] icon-flat" />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|