first commit

components/ThemeToggle.tsx

@@ -0,0 +1,29 @@
+'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>
+    );
+}