feat: 新增暗黑/明亮模式一键切换功能

frontend/i18n/locales/en.json

@@ -90,7 +90,8 @@
     "messages": "messages"
   },
   "settings": {
-    "language": "Language"
+    "language": "Language",
+    "toggleTheme": "Toggle Theme"
   },
   "errors": {
     "generic": "An error occurred, please try again later",

frontend/i18n/locales/zh-CN.json

@@ -90,7 +90,8 @@
     "messages": "封邮件"
   },
   "settings": {
-    "language": "语言"
+    "language": "语言",
+    "toggleTheme": "切换主题"
   },
   "errors": {
     "generic": "发生错误，请稍后重试",

frontend/src/components/Header.tsx

@@ -5,6 +5,7 @@ import LanguageSwitcher from './LanguageSwitcher';
 import HeaderMailbox from './HeaderMailbox';
 import Container from './Container';
 import { getEmailDomains, getDefaultEmailDomain, EMAIL_DOMAINS, DEFAULT_EMAIL_DOMAIN } from '../config';
+import ThemeSwitcher from './ThemeSwitcher'; // 导入新增的主题切换组件
 
 interface HeaderProps {
   mailbox: Mailbox | null;
@@ -56,6 +57,8 @@ const Header: React.FC<HeaderProps> = ({
                 isLoading={isLoading}
               />
               <div className="ml-3 pl-3 border-l border-muted-foreground/20 flex items-center">
+                {/* 在这里添加主题切换组件 */}
+                <ThemeSwitcher />
                 <LanguageSwitcher />
                 <a
                   href="https://github.com/zaunist/zmail"

frontend/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * 主题切换组件
+ * 用于在明亮和暗黑模式之间切换
+ */
+const ThemeSwitcher: React.FC = () => {
+  const { t } = useTranslation();
+  
+  // 从 localStorage 获取初始主题，如果不存在则默认为 'light'
+  const [theme, setTheme] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+    return savedTheme || 'light';
+  });
+
+  // 使用 useEffect 监听 theme 状态的变化，并应用到 <html> 元素上
+  useEffect(() => {
+    const root = window.document.documentElement;
+    // 先移除旧的 class，以防万一
+    root.classList.remove(theme === 'light' ? 'dark' : 'light');
+    // 添加当前主题的 class
+    root.classList.add(theme);
+    // 将当前主题保存到 localStorage
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  // 定义切换主题的函数
+  const toggleTheme = () => {
+    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="w-8 h-8 flex items-center justify-center rounded-md transition-all duration-200 hover:bg-primary/20 hover:text-primary hover:scale-110"
+      aria-label={t('settings.toggleTheme', '切换主题')}
+      title={t('settings.toggleTheme', '切换主题')}
+    >
+      {/* 根据当前主题显示不同的图标 */}
+      {theme === 'light' ? (
+        <i className="fas fa-moon text-base"></i> // 亮色模式下，显示月亮图标以切换到暗色
+      ) : (
+        <i className="fas fa-sun text-base"></i> // 暗色模式下，显示太阳图标以切换到亮色
+      )}
+    </button>
+  );
+};
+
+export default ThemeSwitcher;