feat: add dark mode support

Author: JavaZeroo

src/App.jsx

@@ -6,6 +6,7 @@ import ChartContainer from './components/ChartContainer';
 import { ComparisonControls } from './components/ComparisonControls';
 import { Header } from './components/Header';
 import { FileConfigModal } from './components/FileConfigModal';
+import { ThemeToggle } from './components/ThemeToggle';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { mergeFilesWithReplacement } from './utils/mergeFiles.js';
 
@@ -273,9 +274,10 @@ function App() {
                 <h1 className="text-lg font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-600 animate-gradient-slow">
                   Log Analyzer
                 </h1>
+                <ThemeToggle className="ml-auto" />
                 <button
                   onClick={() => setSidebarVisible(false)}
-                  className="ml-auto p-1 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
+                  className="p-1 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
                   aria-label="隐藏工具栏"
                 >
                   <PanelLeftClose size={16} aria-hidden="true" />

src/components/FileUpload.jsx

@@ -63,16 +63,18 @@ export function FileUpload({ onFilesUploaded }) {
   }, [processFiles]);
 
   return (
-    <div className="bg-white rounded-lg shadow-md p-3">
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-3">
       <h3 
         id="file-upload-heading"
-        className="text-base font-semibold text-gray-800 mb-2"
+        className="text-base font-semibold text-gray-800 dark:text-gray-100 mb-2"
       >
         📁 文件上传
       </h3>
       <div
         className={`drag-area border-2 border-dashed rounded-lg p-4 text-center cursor-pointer ${
-          isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
+          isDragOver
+            ? 'border-blue-500 bg-blue-50 dark:bg-blue-900'
+            : 'border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500 dark:bg-gray-700'
         }`}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
@@ -90,17 +92,17 @@ export function FileUpload({ onFilesUploaded }) {
           }
         }}
       >
-        <Upload 
-          className="mx-auto mb-2 text-gray-400" 
-          size={32} 
+        <Upload
+          className="mx-auto mb-2 text-gray-400 dark:text-gray-200"
+          size={32}
           aria-hidden="true"
         />
-        <p className="text-sm text-gray-600 mb-1">
+        <p className="text-sm text-gray-600 dark:text-gray-300 mb-1">
           🎯 拖拽文件到此处或点击选择文件
         </p>
         <p 
           id="file-upload-description"
-          className="text-xs text-gray-500"
+          className="text-xs text-gray-500 dark:text-gray-400"
         >
           📄 支持所有文本格式文件
         </p>

src/components/ThemeToggle.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Moon, Sun } from 'lucide-react';
+
+export function ThemeToggle({ className = '' }) {
+  const [isDark, setIsDark] = useState(() =>
+    document.documentElement.classList.contains('dark')
+  );
+
+  const toggleTheme = () => {
+    document.documentElement.classList.toggle('dark');
+    setIsDark(document.documentElement.classList.contains('dark'));
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      aria-label="切换主题"
+      className={`p-1 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded ${className}`}
+    >
+      {isDark ? <Sun size={16} aria-hidden="true" /> : <Moon size={16} aria-hidden="true" />}
+    </button>
+  );
+}

src/components/__tests__/ThemeToggle.test.jsx

@@ -0,0 +1,15 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { ThemeToggle } from '../ThemeToggle';
+
+describe('ThemeToggle', () => {
+  it('toggles dark class on document element', () => {
+    document.documentElement.classList.remove('dark');
+    render(<ThemeToggle />);
+    const button = screen.getByRole('button', { name: '切换主题' });
+    fireEvent.click(button);
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    fireEvent.click(button);
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+  });
+});

src/index.css

@@ -4,6 +4,9 @@
 
 /* Accessibility improvements */
 @layer base {
+  body {
+    @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
+  }
   /* Screen reader only content */
   .sr-only {
     position: absolute;

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",