Develop (#21)

docs: 添加组件文档注释和类型导入
refactor: 统一使用 SnackbarOptions 类型
style: 优化导入语句顺序和格式
refactor: 简化假数据生成器中的faker导入和使用
feat(form-recognizer): 增强表单识别功能并优化UI交互
refactor: 移除未使用的组件文件
refactor(页面头部): 提取通用 PageHeader 组件
style(组件): 调整自动刷新开关和存储选项网格的样式
style(ui): 调整时间戳页面和结果视图的样式
ci(workflow): 移除Firefox测试以简化CI流程
refactor(qrcode): 重构二维码解析功能并提取为独立模块
style(页面样式): 统一页面头部图标颜色并优化表单样式
feat(formMapping): 添加表单映射功能
feat(表单映射): 添加配置导出功能及状态提示
feat(表单填充): 新增智能表单填充功能
ci: 精简触发CI的工作流分支
test: 更新路由测试以匹配新增的路由数量
test: 将测试文件中的描述和断言翻译为中文
test(PageHeader): 添加组件测试用例
refactor(theme): 重构主题样式并优化仪表盘卡片组件
refactor(Button): 统一按钮样式并移除重复样式定义
docs: 更新 README 文件中的目录结构说明
refactor: 优化代码类型声明和UI布局
refactor(消息通信): 使用 @webext-core/messaging 重构消息处理逻辑
fix: 修复依赖项缺失导致的潜在问题
refactor: 重构表单识别和消息处理逻辑
feat(侧边栏): 添加侧边栏状态变化通知功能
refactor: 优化高亮组件渲染逻辑并添加防抖处理
refactor: 统一组件导出方式为默认导出
refactor: 重构样式系统并迁移至 MUI 主题
docs: 更新项目文档以反映新增功能和技术栈细节
feat: 添加错误边界组件以捕获子组件错误
refactor(ui): 使用全局 snackbar 替换本地通知组件
refactor(snackbar): 重构全局消息提示为 SnackbarProvider 组件
refactor(Snackbar): 重构消息提示组件并优化样式
refactor: 重构路由和功能配置系统
refactor(GlobalSnackbar): 合并SnackbarProvider到GlobalSnackbar组件
feat(表单映射): 增强高亮器功能并优化元素定位
refactor: 移除表单映射相关功能
feat: 实现页面组件懒加载并优化加载状态显示
refactor: 移除未使用的数据生成和验证工具类
chore: 更新应用图标文件
refactor(qrcode): 替换二维码生成和解析库以减小体积
feat: 添加在标签页打开功能并优化错误处理
feat: 支持独立标签页模式并重构路由配置
feat(ui): 优化响应式布局和样式设计
refactor: 移除URL工具相关代码
refactor: 简化页面标题和存储选项网格的响应式布局
refactor: 优化样式和错误处理
refactor: 重构页面组件结构
style(DashboardPage): 优化仪表盘布局为响应式网格
refactor(ToolCard): 重构工具卡片组件并添加详细注释
feat: 新增文本统计功能
feat(jwt): 添加 JWT 解析工具功能
docs: 更新 README 以更清晰地描述项目功能和结构
docs: 更新AGENTS.md文档以反映项目最新状态
test: 更新特征计数测试以匹配新增工具
style: 统一导入语句顺序
refactor(pages): 重构工具页面组件结构并优化功能实现
feat(顶部栏): 添加搜索功能和历史记录
feat: 添加多语言支持(i18n)
feat(顶部栏): 添加语言切换功能并优化国际化支持
feat(i18n): 增加语言归一化和同步功能
fix(剪贴板): 使用国际化文本替换剪贴板消息
test(顶部栏): 更新测试以匹配国际化标题
refactor: 重构组件目录结构
refactor(Dashboard): 优化卡片组件结构并移除无用属性
refactor(timestamp): 合并输入处理函数并优化样式结构
refactor(dashboard): 重构仪表盘卡片组件并优化布局
refactor(storageCleaner): 重构样式代码并优化国际化处理
refactor(StorageCleaner): 优化条件判断和清理未使用的代码
refactor(QrCode): 重构二维码页面样式和组件结构
refactor(ErrorBoundary): 移除冗余状态更新并调整错误背景色
feat(TopBar): 优化顶部导航栏功能并添加样式配置
chore: 在.gitignore中添加docs目录
feat(JsonDiff): 添加差异引擎类型定义
feat: 新增 JSON 差异比较工具功能
feat(主题): 添加暗色模式支持并重构主题系统

config/theme.ts

@@ -1,131 +1,153 @@
-import { createTheme } from '@mui/material/styles';
+import { createTheme, type PaletteMode, type Theme } from '@mui/material/styles';
 import { THEME_COLORS } from './pageTheme';
 
 /**
- * 统一的 MUI 主题配置
- * 整合了原有的外部 CSS 样式（滚动条、动画、基础重置）
+ * 按模式生成 MUI 主题
+ *
+ * - light：使用 THEME_COLORS 中饱和度较高的版本作为 main
+ * - dark：使用 *Light 变体作为 main，保证暗底对比度满足 WCAG AA
+ *
+ * 所有调色板槽位均显式指定，不依赖 MUI 默认值。
  */
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: THEME_COLORS.primary,
-      dark: THEME_COLORS.primaryDark,
-      light: THEME_COLORS.primaryLight,
+export function getTheme(mode: PaletteMode): Theme {
+  const isDark = mode === 'dark';
+
+  return createTheme({
+    palette: {
+      mode,
+      primary: {
+        main: isDark ? THEME_COLORS.primaryLight : THEME_COLORS.primary,
+        dark: THEME_COLORS.primaryDark,
+        light: THEME_COLORS.primaryLight,
+      },
+      secondary: {
+        main: isDark ? THEME_COLORS.purpleLight : THEME_COLORS.purple,
+        dark: THEME_COLORS.purpleDark,
+        light: THEME_COLORS.purpleLight,
+      },
+      success: {
+        main: isDark ? THEME_COLORS.successLight : THEME_COLORS.success,
+        dark: THEME_COLORS.successDark,
+        light: THEME_COLORS.successLight,
+      },
+      warning: {
+        main: isDark ? THEME_COLORS.warningLight : THEME_COLORS.warning,
+        dark: THEME_COLORS.warningDark,
+        light: THEME_COLORS.warningLight,
+      },
+      error: {
+        main: isDark ? THEME_COLORS.errorLight : THEME_COLORS.error,
+        dark: THEME_COLORS.errorDark,
+        light: THEME_COLORS.errorLight,
+      },
+      info: {
+        main: isDark ? THEME_COLORS.indigoLight : THEME_COLORS.indigo,
+        dark: THEME_COLORS.indigoDark,
+        light: THEME_COLORS.indigoLight,
+      },
+      background: {
+        default: isDark ? '#121212' : '#f5f5f5',
+        paper: isDark ? '#1e1e1e' : '#ffffff',
+      },
+      divider: isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
     },
-    success: {
-      main: THEME_COLORS.success,
-      dark: THEME_COLORS.successDark,
-      light: THEME_COLORS.successLight,
+    typography: {
+      fontFamily: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+      ].join(','),
     },
-    warning: {
-      main: THEME_COLORS.warning,
-      dark: THEME_COLORS.warningDark,
-      light: THEME_COLORS.warningLight,
-    },
-    error: {
-      main: THEME_COLORS.error,
-      dark: THEME_COLORS.errorDark,
-      light: THEME_COLORS.errorLight,
-    },
-    secondary: {
-      main: THEME_COLORS.purple,
-      dark: THEME_COLORS.purpleDark,
-      light: THEME_COLORS.purpleLight,
-    },
-  },
-  typography: {
-    fontFamily: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-    ].join(','),
-  },
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        ':root': {
-          '--sb-width': '6px',
-          '--sb-thumb-color': 'rgba(0, 0, 0, 0.1)',
-          '--sb-thumb-hover': 'rgba(0, 0, 0, 0.2)',
-          '--sb-track-color': 'transparent',
-        },
-        html: {
-          margin: 0,
-          padding: 0,
-          width: '100%',
-          minHeight: '100%',
-          backgroundColor: '#f5f5f5',
-        },
-        'body, #root': {
-          margin: 0,
-          padding: 0,
-          width: '100%',
-          minHeight: '100%',
-        },
-        // 针对 Popup 的特殊处理（如果需要固定宽高，可以在具体入口点或容器中处理，
-        // 这里提供全局基础，具体尺寸在 App 容器中限制）
-        body: {
-          WebkitFontSmoothing: 'antialiased',
-          MozOsxFontSmoothing: 'grayscale',
-        },
-        code: {
-          fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace',
-        },
-        'h1, h2, h3, h4, h5, h6': {
-          fontSize: 'inherit',
-          fontWeight: 'inherit',
-        },
-        /* 全局极简滚动条定制 */
-        '*::-webkit-scrollbar': {
-          width: 'var(--sb-width)',
-        },
-        '*::-webkit-scrollbar-track': {
-          background: 'var(--sb-track-color)',
-        },
-        '*::-webkit-scrollbar-thumb': {
-          background: 'var(--sb-thumb-color)',
-          borderRadius: '10px',
-          backgroundClip: 'content-box',
-          border: '1px solid transparent',
-        },
-        '*::-webkit-scrollbar-thumb:hover': {
-          background: 'var(--sb-thumb-hover)',
-        },
-        /* Animations */
-        '@keyframes slideInRight': {
-          from: {
-            transform: 'translateX(30px)',
-            opacity: 0,
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: (theme) => ({
+          ':root': {
+            '--sb-width': '6px',
+            '--sb-thumb-color':
+              theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)',
+            '--sb-thumb-hover':
+              theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.25)' : 'rgba(0, 0, 0, 0.2)',
+            '--sb-track-color': 'transparent',
           },
-          to: {
-            transform: 'translateX(0)',
-            opacity: 1,
+          html: {
+            margin: 0,
+            padding: 0,
+            width: '100%',
+            minHeight: '100%',
+            backgroundColor: theme.palette.background.default,
           },
-        },
-        '@keyframes fadeIn': {
-          from: {
-            opacity: 0,
+          'body, #root': {
+            margin: 0,
+            padding: 0,
+            width: '100%',
+            minHeight: '100%',
           },
-          to: {
-            opacity: 1,
+          body: {
+            WebkitFontSmoothing: 'antialiased',
+            MozOsxFontSmoothing: 'grayscale',
+            backgroundColor: theme.palette.background.default,
+            color: theme.palette.text.primary,
           },
-        },
-        '.page-transition-enter': {
-          animation: 'slideInRight 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards',
-        },
-        '.page-transition-dashboard': {
-          animation: 'fadeIn 0.3s ease-out forwards',
-        },
+          code: {
+            fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace',
+          },
+          'h1, h2, h3, h4, h5, h6': {
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+          },
+          /* 全局极简滚动条定制 */
+          '*::-webkit-scrollbar': {
+            width: 'var(--sb-width)',
+          },
+          '*::-webkit-scrollbar-track': {
+            background: 'var(--sb-track-color)',
+          },
+          '*::-webkit-scrollbar-thumb': {
+            background: 'var(--sb-thumb-color)',
+            borderRadius: '10px',
+            backgroundClip: 'content-box',
+            border: '1px solid transparent',
+          },
+          '*::-webkit-scrollbar-thumb:hover': {
+            background: 'var(--sb-thumb-hover)',
+          },
+          /* Animations */
+          '@keyframes slideInRight': {
+            from: {
+              transform: 'translateX(30px)',
+              opacity: 0,
+            },
+            to: {
+              transform: 'translateX(0)',
+              opacity: 1,
+            },
+          },
+          '@keyframes fadeIn': {
+            from: {
+              opacity: 0,
+            },
+            to: {
+              opacity: 1,
+            },
+          },
+          '.page-transition-enter': {
+            animation: 'slideInRight 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards',
+          },
+          '.page-transition-dashboard': {
+            animation: 'fadeIn 0.3s ease-out forwards',
+          },
+        }),
       },
     },
-  },
-});
+  });
+}
 
+const theme = getTheme('light');
 export default theme;