diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js
index 55b3ce0c..81045a90 100644
--- a/src/components/Navbars/HomeNavbar.js
+++ b/src/components/Navbars/HomeNavbar.js
@@ -516,13 +516,13 @@ export default function HomeNavbar() {
     const prevUserIdRef = React.useRef(userId);
     const prevIsAuthenticatedRef = React.useRef(isAuthenticated);
 
-    // 添加调试信息
-    logger.debug('HomeNavbar', '组件渲染状态', {
-        hasUser: !!user,
-        isAuthenticated,
-        isLoading,
-        userId: user?.id
-    });
+    // 添加调试信息 - 暂时注释以减少日志噪音
+    // logger.debug('HomeNavbar', '组件渲染状态', {
+    //     hasUser: !!user,
+    //     isAuthenticated,
+    //     isLoading,
+    //     userId: user?.id
+    // });
 
     // 获取显示名称的函数
     const getDisplayName = () => {
diff --git a/src/components/Navbars/components/ThemeToggleButton.js b/src/components/Navbars/components/ThemeToggleButton.js
new file mode 100644
index 00000000..57e0b3d1
--- /dev/null
+++ b/src/components/Navbars/components/ThemeToggleButton.js
@@ -0,0 +1,33 @@
+// src/components/Navbars/components/ThemeToggleButton.js
+import React, { memo } from 'react';
+import { IconButton, useColorMode, Tooltip } from '@chakra-ui/react';
+import { SunIcon, MoonIcon } from '@chakra-ui/icons';
+
+/**
+ * 主题切换按钮组件
+ *
+ * 性能优化：
+ * - 使用 memo 避免父组件重新渲染时的不必要更新
+ * - 只依赖 colorMode，当主题切换时才重新渲染
+ *
+ * @returns {JSX.Element}
+ */
+const ThemeToggleButton = memo(() => {
+    const { colorMode, toggleColorMode } = useColorMode();
+
+    return (
+        <Tooltip label={colorMode === 'light' ? '切换到暗色模式' : '切换到亮色模式'}>
+            <IconButton
+                aria-label="切换主题"
+                icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+                onClick={toggleColorMode}
+                variant="ghost"
+                size="md"
+            />
+        </Tooltip>
+    );
+});
+
+ThemeToggleButton.displayName = 'ThemeToggleButton';
+
+export default ThemeToggleButton;