diff --git a/web/src/components/layout/HeaderBar/LanguageSelector.jsx b/web/src/components/layout/HeaderBar/LanguageSelector.jsx
index 1f5e0bb7..68bdcb01 100644
--- a/web/src/components/layout/HeaderBar/LanguageSelector.jsx
+++ b/web/src/components/layout/HeaderBar/LanguageSelector.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { Button, Dropdown } from '@douyinfe/semi-ui';
-import { IconLanguage } from '@douyinfe/semi-icons';
+import { Languages } from 'lucide-react';
 import { CN, GB } from 'country-flag-icons/react/3x2';
 
 const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
@@ -46,7 +46,7 @@ const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
       }
     >
       <Button
-        icon={<IconLanguage className="text-lg" />}
+        icon={<Languages size={18} />}
         aria-label={t('切换语言')}
         theme="borderless"
         type="tertiary"
diff --git a/web/src/components/layout/HeaderBar/NotificationButton.jsx b/web/src/components/layout/HeaderBar/NotificationButton.jsx
index 9b3cc225..04fba1e6 100644
--- a/web/src/components/layout/HeaderBar/NotificationButton.jsx
+++ b/web/src/components/layout/HeaderBar/NotificationButton.jsx
@@ -19,11 +19,11 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { Button, Badge } from '@douyinfe/semi-ui';
-import { IconBell } from '@douyinfe/semi-icons';
+import { Bell } from 'lucide-react';
 
 const NotificationButton = ({ unreadCount, onNoticeOpen, t }) => {
   const buttonProps = {
-    icon: <IconBell className="text-lg" />,
+    icon: <Bell size={18} />,
     'aria-label': t('系统公告'),
     onClick: onNoticeOpen,
     theme: "borderless",
diff --git a/web/src/components/layout/HeaderBar/ThemeToggle.jsx b/web/src/components/layout/HeaderBar/ThemeToggle.jsx
index 810a15db..d06fe2e3 100644
--- a/web/src/components/layout/HeaderBar/ThemeToggle.jsx
+++ b/web/src/components/layout/HeaderBar/ThemeToggle.jsx
@@ -17,20 +17,88 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
-import { IconSun, IconMoon } from '@douyinfe/semi-icons';
+import React, { useMemo } from 'react';
+import { Button, Dropdown } from '@douyinfe/semi-ui';
+import { Sun, Moon, Monitor } from 'lucide-react';
+import { useActualTheme } from '../../../context/Theme';
 
 const ThemeToggle = ({ theme, onThemeToggle, t }) => {
+  const actualTheme = useActualTheme();
+
+  const themeOptions = useMemo(() => ([
+    {
+      key: 'light',
+      icon: <Sun size={18} />,
+      buttonIcon: <Sun size={18} />,
+      label: t('浅色模式'),
+      description: t('始终使用浅色主题')
+    },
+    {
+      key: 'dark',
+      icon: <Moon size={18} />,
+      buttonIcon: <Moon size={18} />,
+      label: t('深色模式'),
+      description: t('始终使用深色主题')
+    },
+    {
+      key: 'auto',
+      icon: <Monitor size={18} />,
+      buttonIcon: <Monitor size={18} />,
+      label: t('自动模式'),
+      description: t('跟随系统主题设置')
+    }
+  ]), [t]);
+
+  const getItemClassName = (isSelected) =>
+    isSelected
+      ? '!bg-semi-color-primary-light-default !font-semibold'
+      : 'hover:!bg-semi-color-fill-1';
+
+  const currentButtonIcon = useMemo(() => {
+    const currentOption = themeOptions.find(option => option.key === theme);
+    return currentOption?.buttonIcon || themeOptions[2].buttonIcon;
+  }, [theme, themeOptions]);
+
   return (
-    <Button
-      icon={theme === 'dark' ? <IconSun size="large" className="text-yellow-500" /> : <IconMoon size="large" className="text-gray-300" />}
-      aria-label={t('切换主题')}
-      onClick={onThemeToggle}
-      theme="borderless"
-      type="tertiary"
-      className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2"
-    />
+    <Dropdown
+      position="bottomRight"
+      render={
+        <Dropdown.Menu>
+          {themeOptions.map((option) => (
+            <Dropdown.Item
+              key={option.key}
+              icon={option.icon}
+              onClick={() => onThemeToggle(option.key)}
+              className={getItemClassName(theme === option.key)}
+            >
+              <div className="flex flex-col">
+                <span>{option.label}</span>
+                <span className="text-xs text-semi-color-text-2">
+                  {option.description}
+                </span>
+              </div>
+            </Dropdown.Item>
+          ))}
+
+          {theme === 'auto' && (
+            <>
+              <Dropdown.Divider />
+              <div className="px-3 py-2 text-xs text-semi-color-text-2">
+                {t('当前跟随系统')}：{actualTheme === 'dark' ? t('深色') : t('浅色')}
+              </div>
+            </>
+          )}
+        </Dropdown.Menu>
+      }
+    >
+      <Button
+        icon={currentButtonIcon}
+        aria-label={t('切换主题')}
+        theme="borderless"
+        type="tertiary"
+        className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 !rounded-full !bg-semi-color-fill-0 hover:!bg-semi-color-fill-1"
+      />
+    </Dropdown>
   );
 };
 
diff --git a/web/src/context/Theme/index.jsx b/web/src/context/Theme/index.jsx
index 04e51042..c0225125 100644
--- a/web/src/context/Theme/index.jsx
+++ b/web/src/context/Theme/index.jsx
@@ -17,39 +17,90 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import { createContext, useCallback, useContext, useState } from 'react';
+import { createContext, useCallback, useContext, useState, useEffect } from 'react';
 
 const ThemeContext = createContext(null);
 export const useTheme = () => useContext(ThemeContext);
 
+const ActualThemeContext = createContext(null);
+export const useActualTheme = () => useContext(ActualThemeContext);
+
 const SetThemeContext = createContext(null);
 export const useSetTheme = () => useContext(SetThemeContext);
 
+// 检测系统主题偏好
+const getSystemTheme = () => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+};
+
 export const ThemeProvider = ({ children }) => {
   const [theme, _setTheme] = useState(() => {
     try {
-      return localStorage.getItem('theme-mode') || null;
+      return localStorage.getItem('theme-mode') || 'auto';
     } catch {
-      return null;
+      return 'auto';
     }
   });
 
-  const setTheme = useCallback((input) => {
-    _setTheme(input ? 'dark' : 'light');
+  const [systemTheme, setSystemTheme] = useState(getSystemTheme());
 
-    const body = document.body;
-    if (!input) {
-      body.removeAttribute('theme-mode');
-      localStorage.setItem('theme-mode', 'light');
-    } else {
-      body.setAttribute('theme-mode', 'dark');
-      localStorage.setItem('theme-mode', 'dark');
+  // 计算实际应用的主题
+  const actualTheme = theme === 'auto' ? systemTheme : theme;
+
+  // 监听系统主题变化
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+      const handleSystemThemeChange = (e) => {
+        setSystemTheme(e.matches ? 'dark' : 'light');
+      };
+
+      mediaQuery.addEventListener('change', handleSystemThemeChange);
+
+      return () => {
+        mediaQuery.removeEventListener('change', handleSystemThemeChange);
+      };
     }
   }, []);
 
+  // 应用主题到DOM
+  useEffect(() => {
+    const body = document.body;
+    if (actualTheme === 'dark') {
+      body.setAttribute('theme-mode', 'dark');
+      document.documentElement.classList.add('dark');
+    } else {
+      body.removeAttribute('theme-mode');
+      document.documentElement.classList.remove('dark');
+    }
+  }, [actualTheme]);
+
+  const setTheme = useCallback((newTheme) => {
+    let themeValue;
+
+    if (typeof newTheme === 'boolean') {
+      // 向后兼容原有的 boolean 参数
+      themeValue = newTheme ? 'dark' : 'light';
+    } else if (typeof newTheme === 'string') {
+      // 新的字符串参数支持 'light', 'dark', 'auto'
+      themeValue = newTheme;
+    } else {
+      themeValue = 'auto';
+    }
+
+    _setTheme(themeValue);
+    localStorage.setItem('theme-mode', themeValue);
+  }, []);
+
   return (
     <SetThemeContext.Provider value={setTheme}>
-      <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+      <ActualThemeContext.Provider value={actualTheme}>
+        <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+      </ActualThemeContext.Provider>
     </SetThemeContext.Provider>
   );
 };
diff --git a/web/src/hooks/common/useHeaderBar.js b/web/src/hooks/common/useHeaderBar.js
index 8fd435df..eb898f8e 100644
--- a/web/src/hooks/common/useHeaderBar.js
+++ b/web/src/hooks/common/useHeaderBar.js
@@ -22,7 +22,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { UserContext } from '../../context/User';
 import { StatusContext } from '../../context/Status';
-import { useSetTheme, useTheme } from '../../context/Theme';
+import { useSetTheme, useTheme, useActualTheme } from '../../context/Theme';
 import { getLogo, getSystemName, API, showSuccess } from '../../helpers';
 import { useIsMobile } from './useIsMobile';
 import { useSidebarCollapsed } from './useSidebarCollapsed';
@@ -31,7 +31,7 @@ import { useMinimumLoadingTime } from './useMinimumLoadingTime';
 export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
   const { t, i18n } = useTranslation();
   const [userState, userDispatch] = useContext(UserContext);
-  const [statusState, statusDispatch] = useContext(StatusContext);
+  const [statusState] = useContext(StatusContext);
   const isMobile = useIsMobile();
   const [collapsed, toggleCollapsed] = useSidebarCollapsed();
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -54,6 +54,7 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
   const isConsoleRoute = location.pathname.startsWith('/console');
 
   const theme = useTheme();
+  const actualTheme = useActualTheme();
   const setTheme = useSetTheme();
 
   // Logo loading effect
@@ -65,21 +66,13 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
     img.onload = () => setLogoLoaded(true);
   }, [logo]);
 
-  // Theme effect
+  // Send theme to iframe
   useEffect(() => {
-    if (theme === 'dark') {
-      document.body.setAttribute('theme-mode', 'dark');
-      document.documentElement.classList.add('dark');
-    } else {
-      document.body.removeAttribute('theme-mode');
-      document.documentElement.classList.remove('dark');
-    }
-
     const iframe = document.querySelector('iframe');
     if (iframe) {
-      iframe.contentWindow.postMessage({ themeMode: theme }, '*');
+      iframe.contentWindow.postMessage({ themeMode: actualTheme }, '*');
     }
-  }, [theme, isNewYear]);
+  }, [actualTheme]);
 
   // Language change effect
   useEffect(() => {
@@ -110,8 +103,11 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
     i18n.changeLanguage(lang);
   };
 
-  const handleThemeToggle = () => {
-    setTheme(theme === 'dark' ? false : true);
+  const handleThemeToggle = (newTheme) => {
+    if (!newTheme || (newTheme !== 'light' && newTheme !== 'dark' && newTheme !== 'auto')) {
+      return;
+    }
+    setTheme(newTheme);
   };
 
   const handleMobileMenuToggle = () => {
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 56a4236b..4adcb131 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1984,5 +1984,15 @@
   "按顺序替换content中的变量占位符": "Replace variable placeholders in content in order",
   "Unix时间戳": "Unix timestamp",
   "隐私设置": "Privacy settings",
-  "记录请求与错误日志IP": "Record request and error log IP"
+  "记录请求与错误日志IP": "Record request and error log IP",
+  "切换主题": "Switch Theme",
+  "浅色模式": "Light Mode",
+  "深色模式": "Dark Mode",
+  "自动模式": "Auto Mode",
+  "始终使用浅色主题": "Always use light theme",
+  "始终使用深色主题": "Always use dark theme",
+  "跟随系统主题设置": "Follow system theme",
+  "当前跟随系统": "Currently following system",
+  "深色": "Dark",
+  "浅色": "Light"
 }
\ No newline at end of file
diff --git a/web/src/pages/Home/index.jsx b/web/src/pages/Home/index.jsx
index 776de0c8..5115373a 100644
--- a/web/src/pages/Home/index.jsx
+++ b/web/src/pages/Home/index.jsx
@@ -18,11 +18,12 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, Typography, Tag, Input, ScrollList, ScrollItem } from '@douyinfe/semi-ui';
+import { Button, Typography, Input, ScrollList, ScrollItem } from '@douyinfe/semi-ui';
 import { API, showError, copy, showSuccess } from '../../helpers';
 import { useIsMobile } from '../../hooks/common/useIsMobile';
 import { API_ENDPOINTS } from '../../constants/common.constant';
 import { StatusContext } from '../../context/Status';
+import { useActualTheme } from '../../context/Theme';
 import { marked } from 'marked';
 import { useTranslation } from 'react-i18next';
 import { IconGithubLogo, IconPlay, IconFile, IconCopy } from '@douyinfe/semi-icons';
@@ -35,6 +36,7 @@ const { Text } = Typography;
 const Home = () => {
   const { t, i18n } = useTranslation();
   const [statusState] = useContext(StatusContext);
+  const actualTheme = useActualTheme();
   const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
   const [homePageContent, setHomePageContent] = useState('');
   const [noticeVisible, setNoticeVisible] = useState(false);
@@ -62,9 +64,8 @@ const Home = () => {
       if (data.startsWith('https://')) {
         const iframe = document.querySelector('iframe');
         if (iframe) {
-          const theme = localStorage.getItem('theme-mode') || 'light';
           iframe.onload = () => {
-            iframe.contentWindow.postMessage({ themeMode: theme }, '*');
+            iframe.contentWindow.postMessage({ themeMode: actualTheme }, '*');
             iframe.contentWindow.postMessage({ lang: i18n.language }, '*');
           };
         }