30 lines
806 B
TypeScript
30 lines
806 B
TypeScript
'use client';
|
||
|
||
import { useTheme } from './ThemeProvider';
|
||
import { useEffect, useState } from 'react';
|
||
|
||
export function ThemeToggle() {
|
||
const { theme, toggleTheme } = useTheme();
|
||
const [mounted, setMounted] = useState(false);
|
||
|
||
// Avoid hydration mismatch by only rendering icon after mount
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
}, []);
|
||
|
||
if (!mounted) {
|
||
return <button className="theme-toggle" style={{ visibility: 'hidden' }}>☀️</button>;
|
||
}
|
||
|
||
return (
|
||
<button
|
||
onClick={toggleTheme}
|
||
className="theme-toggle"
|
||
title={theme === 'light' ? '切换到深色模式' : '切换到亮色模式'}
|
||
aria-label="Toggle theme"
|
||
>
|
||
{theme === 'light' ? '🌙' : '☀️'}
|
||
</button>
|
||
);
|
||
}
|