's'

app/components/ThemeToggle.tsx

@@ -1,19 +1,38 @@
 "use client";
 
-import { useTheme } from "../context/ThemeContext";
+import { useTheme } from "@/app/context/ThemeContext";
+import { useState, useEffect } from "react";
 
 export default function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
+  const isDark = theme === "dark";
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+        aria-label="切换主题"
+      >
+        <div className="h-5 w-5" />
+      </button>
+    );
+  }
 
   return (
     <button
       type="button"
       onClick={toggleTheme}
       className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-      aria-label={theme === "dark" ? "切换到日间模式" : "切换到夜间模式"}
-      title={theme === "dark" ? "日间模式" : "夜间模式"}
+      aria-label={isDark ? "切换到日间模式" : "切换到夜间模式"}
+      title={isDark ? "日间模式" : "夜间模式"}
     >
-      {theme === "dark" ? (
+      {isDark ? (
         <svg
           className="h-5 w-5"
           fill="none"