24 lines
709 B
TypeScript
24 lines
709 B
TypeScript
|
import { useTheme } from '../context/ThemeContext'
|
||
|
|
|
||
|
|
export function ThemeToggle() {
|
||
|
|
const { theme, toggle } = useTheme()
|
||
|
|
const isDark = theme === 'dark'
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={toggle}
|
||
|
|
className="theme-toggle"
|
||
|
|
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
|
||
|
|
title={isDark ? 'Light mode' : 'Dark mode'}
|
||
|
|
>
|
||
|
|
<span className={`theme-toggle-track ${isDark ? 'is-dark' : ''}`}>
|
||
|
|
<span className="theme-toggle-thumb">{isDark ? '🌙' : '☀️'}</span>
|
||
|
|
</span>
|
||
|
|
<span className="text-xs font-mono hidden sm:inline text-[var(--text-muted)]">
|
||
|
|
{isDark ? 'Dark' : 'Light'}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
}
|