diff --git a/src/App.jsx b/src/App.jsx
index 950e072..fabdf3a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,8 +4,8 @@ import { RegexControls } from './components/RegexControls';
 import { FileList } from './components/FileList';
 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';
 
@@ -194,14 +194,14 @@ function App() {
   }, [handleGlobalDragEnter, handleGlobalDragOver, handleGlobalDragLeave, handleGlobalDrop]);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 relative page-fade-in">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-700 relative page-fade-in">
       {/* 全页面拖拽覆盖层 */}
       {globalDragOver && (
         <div
-          className="fixed inset-0 bg-blue-600 bg-opacity-95 z-50 flex items-center justify-center backdrop-blur-sm drag-overlay-fade-in"
+          className="fixed inset-0 bg-blue-600 dark:bg-blue-950 bg-opacity-95 z-50 flex items-center justify-center backdrop-blur-sm drag-overlay-fade-in"
         >
-          <div 
-            className="bg-white rounded-xl shadow-2xl p-8 text-center max-w-md mx-4 border-4 border-dashed border-blue-300 drag-modal-scale-in"
+          <div
+            className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 text-center max-w-md mx-4 border-4 border-dashed border-blue-300 dark:border-blue-700 drag-modal-scale-in"
           >
             <div className="mb-6">
               <div className="relative">
@@ -226,13 +226,13 @@ function App() {
                 </div>
               </div>
             </div>
-            <h3 className="text-xl font-bold text-gray-900 mb-3">
+            <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
               🎯 释放文件以上传
             </h3>
-            <p className="text-sm text-gray-600 mb-2">
+            <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
               支持 <span className="font-semibold text-blue-600">所有文本格式</span> 文件
             </p>
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-gray-500 dark:text-gray-400">
               拖拽到页面任意位置即可快速上传文件
             </p>
           </div>
@@ -242,7 +242,7 @@ function App() {
       {!sidebarVisible && (
         <button
           onClick={() => setSidebarVisible(true)}
-          className="fixed top-3 left-3 z-40 p-2 bg-white rounded-full shadow-md text-gray-600 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="fixed top-3 left-3 z-40 p-2 bg-white dark:bg-gray-800 rounded-full shadow-md text-gray-600 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
           aria-label="显示工具栏"
         >
           <PanelLeftOpen size={20} aria-hidden="true" />
@@ -263,9 +263,9 @@ function App() {
               aria-label="控制面板"
             >
               {/* 标题信息 */}
-              <div className="bg-white rounded-lg shadow-md p-3">
+              <div className="card">
               <div className="flex items-center gap-2 mb-2">
-                <div className="p-2 bg-blue-100 rounded-lg">
+                <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
                   <svg className="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                   </svg>
@@ -273,22 +273,23 @@ 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 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
                   aria-label="隐藏工具栏"
                 >
                   <PanelLeftClose size={16} aria-hidden="true" />
                 </button>
               </div>
-              <p className="text-sm text-gray-600 mb-3">
+              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                 📊 分析和可视化大模型训练日志中的损失函数和梯度范数数据
               </p>
               
               {/* 状态和链接按钮 */}
               <div className="flex items-center gap-2" role="group" aria-label="工具状态和链接">
-                <span 
-                  className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800"
+                <span
+                  className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
                   aria-label="当前为在线版本"
                 >
                   <span aria-hidden="true">🌐</span>
@@ -298,7 +299,7 @@ function App() {
                   href="https://github.com/JavaZeroo/log-parser"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                  className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                   aria-label="访问 GitHub 仓库（在新窗口中打开）"
                 >
                   <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
@@ -334,26 +335,26 @@ function App() {
               />
             )}
 
-            <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="display-options-heading">
-              <h3 
+            <section className="card" aria-labelledby="display-options-heading">
+              <h3
                 id="display-options-heading"
-                className="text-base font-semibold text-gray-800 mb-2"
+                className="card-title mb-2"
               >
                 🎛️ 显示选项
               </h3>
               <div className="space-y-3">
                 <div>
-                  <h4 className="text-xs font-medium text-gray-700 mb-2">📊 图表显示</h4>
-                  <p className="text-xs text-gray-500">上传文件后自动展示所有已配置的指标图表</p>
+                  <h4 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">📊 图表显示</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">上传文件后自动展示所有已配置的指标图表</p>
                 </div>
                 
-                <div className="border-t pt-3">
-                  <h4 className="text-xs font-medium text-gray-700 mb-2">基准线设置</h4>
+                <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
+                  <h4 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">基准线设置</h4>
                   <div className="space-y-3">
                     <div>
-                      <label 
+                      <label
                         htmlFor="relative-baseline"
-                        className="block text-xs font-medium text-gray-700 mb-1"
+                        className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1"
                       >
                         相对误差 Baseline
                       </label>
@@ -363,7 +364,7 @@ function App() {
                         step="0.001"
                         value={relativeBaseline}
                         onChange={(e) => setRelativeBaseline(parseFloat(e.target.value) || 0)}
-                        className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+                        className="input-field"
                         placeholder="0.002"
                         aria-describedby="relative-baseline-description"
                       />
@@ -376,9 +377,9 @@ function App() {
                     </div>
                     
                     <div>
-                      <label 
+                      <label
                         htmlFor="absolute-baseline"
-                        className="block text-xs font-medium text-gray-700 mb-1"
+                        className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1"
                       >
                         绝对误差 Baseline
                       </label>
@@ -388,7 +389,7 @@ function App() {
                         step="0.001"
                         value={absoluteBaseline}
                         onChange={(e) => setAbsoluteBaseline(parseFloat(e.target.value) || 0)}
-                        className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+                        className="input-field"
                         placeholder="0.005"
                         aria-describedby="absolute-baseline-description"
                       />
diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx
index a5f124a..5cda7ec 100644
--- a/src/components/ChartContainer.jsx
+++ b/src/components/ChartContainer.jsx
@@ -532,8 +532,8 @@ export default function ChartContainer({
 
   if (parsedData.length === 0) {
     return (
-      <div className="bg-white rounded-lg shadow-md p-8">
-        <div className="text-center text-gray-500">
+      <div className="card p-8">
+        <div className="text-center text-gray-500 dark:text-gray-400">
           <p className="text-lg mb-2">📊 暂无数据</p>
           <p>📁 请上传日志文件开始分析</p>
         </div>
@@ -559,8 +559,8 @@ export default function ChartContainer({
 
   if (metrics.length === 0) {
     return (
-      <div className="bg-white rounded-lg shadow-md p-8">
-        <div className="text-center text-gray-500">
+      <div className="card p-8">
+        <div className="text-center text-gray-500 dark:text-gray-400">
           <p className="text-lg mb-2 font-medium">🎯 请选择要显示的图表</p>
         </div>
       </div>
@@ -639,8 +639,8 @@ export default function ChartContainer({
         </ResizablePanel>
         {comparisonChart}
         {stats && (
-          <div className="bg-white rounded-lg shadow-md p-3">
-            <h4 className="text-sm font-medium text-gray-700 mb-1">{key} 差值统计</h4>
+          <div className="card">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{key} 差值统计</h4>
             <div className="space-y-1 text-xs">
               <p>平均误差 (normal): {stats.meanNormal.toFixed(6)}</p>
               <p>平均误差 (absolute): {stats.meanAbsolute.toFixed(6)}</p>
diff --git a/src/components/ComparisonControls.jsx b/src/components/ComparisonControls.jsx
index d844575..7447f60 100644
--- a/src/components/ComparisonControls.jsx
+++ b/src/components/ComparisonControls.jsx
@@ -13,16 +13,16 @@ export function ComparisonControls({
   ];
 
   return (
-    <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="comparison-controls-heading">
+    <section className="card" aria-labelledby="comparison-controls-heading">
       <div className="flex items-center gap-2 mb-2">
-        <BarChart2 
-          size={16} 
-          className="text-gray-600" 
+        <BarChart2
+          size={16}
+          className="text-gray-600 dark:text-gray-300"
           aria-hidden="true"
         />
-        <h3 
+        <h3
           id="comparison-controls-heading"
-          className="text-base font-semibold text-gray-800"
+          className="card-title"
         >
           ⚖️ 对比模式
         </h3>
@@ -31,9 +31,9 @@ export function ComparisonControls({
       <fieldset className="space-y-2">
         <legend className="sr-only">选择数据对比模式</legend>
         {modes.map(mode => (
-          <label 
-            key={mode.value} 
-            className="flex items-center cursor-pointer hover:bg-gray-50 p-1 rounded"
+          <label
+            key={mode.value}
+            className="flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 p-1 rounded"
           >
             <input
               type="radio"
@@ -41,16 +41,16 @@ export function ComparisonControls({
               value={mode.value}
               checked={compareMode === mode.value}
               onChange={(e) => onCompareModeChange(e.target.value)}
-              className="text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              className="radio"
               aria-describedby={`mode-${mode.value}-description`}
             />
             <div className="ml-2">
-              <div className="text-xs font-medium text-gray-700">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">
                 {mode.label}
               </div>
-              <div 
+              <div
                 id={`mode-${mode.value}-description`}
-                className="text-xs text-gray-500"
+                className="text-xs text-gray-500 dark:text-gray-400"
               >
                 {mode.description}
               </div>
diff --git a/src/components/FileConfigModal.jsx b/src/components/FileConfigModal.jsx
index 3316e94..d3b8b8e 100644
--- a/src/components/FileConfigModal.jsx
+++ b/src/components/FileConfigModal.jsx
@@ -118,10 +118,10 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
     return (
       <div className="space-y-2">
         <div>
-          <label className="block text-xs font-medium text-gray-700 mb-1">预设</label>
+          <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">预设</label>
           <select
             onChange={(e) => applyPreset(index, e.target.value)}
-            className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+            className="input-field"
             defaultValue=""
           >
             <option value="">选择预设</option>
@@ -132,13 +132,13 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
         </div>
         {/* 模式选择 */}
         <div>
-          <label className="block text-xs font-medium text-gray-700 mb-1">
+          <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
             匹配模式
           </label>
           <select
             value={configItem.mode}
             onChange={(e) => handleMetricChange(index, 'mode', e.target.value)}
-            className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+            className="input-field"
           >
             {Object.entries(MODE_CONFIG).map(([key, modeConfig]) => (
               <option key={key} value={key}>
@@ -146,7 +146,7 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
               </option>
             ))}
           </select>
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
             <ModeIcon size={10} className="inline mr-1" />
             {MODE_CONFIG[configItem.mode].description}
           </p>
@@ -155,17 +155,17 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
         {/* 根据模式显示不同的配置项 */}
         {configItem.mode === MATCH_MODES.KEYWORD && (
           <div>
-            <label className="block text-xs font-medium text-gray-700 mb-1">
+            <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
               关键词
             </label>
             <input
               type="text"
               value={configItem.keyword}
               onChange={(e) => handleMetricChange(index, 'keyword', e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+              className="input-field text-sm"
               placeholder="keyword"
             />
-            <p className="text-xs text-gray-500 mt-1">
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
               支持模糊匹配，如 "loss" 可匹配 "training_loss"
             </p>
           </div>
@@ -173,17 +173,17 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
 
         {configItem.mode === MATCH_MODES.REGEX && (
           <div>
-            <label className="block text-xs font-medium text-gray-700 mb-1">
+            <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
               正则表达式
             </label>
             <input
               type="text"
               value={configItem.regex}
               onChange={(e) => handleMetricChange(index, 'regex', e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none font-mono"
+              className="input-field text-sm font-mono"
               placeholder="value:\\s*([\\d.eE+-]+)"
             />
-            <p className="text-xs text-gray-500 mt-1">
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
               使用捕获组 () 来提取数值
             </p>
           </div>
@@ -203,19 +203,19 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
       onClick={onClose}
     >
       <div 
-        className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+        className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between p-4 border-b bg-gray-50">
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
           <div className="flex items-center gap-2">
             <Settings size={20} className="text-blue-600" aria-hidden="true" />
-            <h2 id="config-modal-title" className="text-lg font-semibold text-gray-800">
+            <h2 id="config-modal-title" className="text-lg font-semibold text-gray-800 dark:text-gray-100">
               配置文件: {file.name}
             </h2>
           </div>
           <button
             onClick={onClose}
-            className="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 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
             aria-label="关闭配置对话框"
           >
             <X size={20} />
@@ -227,13 +227,13 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
           <section>
             {/* 全局同步按钮 */}
             <div className="flex items-center justify-between mb-4">
-              <h3 className="text-base font-medium text-gray-800 flex items-center gap-2">
+              <h3 className="text-base font-medium text-gray-800 dark:text-gray-100 flex items-center gap-2">
                 <BarChart3 size={16} className="text-indigo-600" aria-hidden="true" />
                 解析配置
               </h3>
               <button
                 onClick={syncFromGlobal}
-                className="flex items-center gap-1 px-3 py-1 text-xs text-blue-600 bg-blue-50 hover:bg-blue-100 border border-blue-200 rounded-md transition-colors"
+                className="flex items-center gap-1 px-3 py-1 text-xs text-blue-600 bg-blue-50 dark:bg-blue-900 hover:bg-blue-100 dark:hover:bg-blue-800 border border-blue-200 dark:border-blue-700 rounded-md transition-colors"
                 title="从全局配置同步"
               >
                 <Zap size={12} />
@@ -243,8 +243,8 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
             
             <div className="space-y-4">
               {config.metrics.map((cfg, idx) => (
-                <div key={idx} className="border rounded-lg p-3">
-                  <h4 className="text-sm font-medium text-gray-800 mb-2 flex items-center gap-1">
+                <div key={idx} className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+                  <h4 className="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2 flex items-center gap-1">
                     <TrendingDown size={16} className="text-red-500" aria-hidden="true" />
                     {getMetricTitle(cfg, idx)} 解析配置
                   </h4>
@@ -256,22 +256,22 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
 
           {/* 数据范围配置 */}
           <section>
-            <h3 className="text-base font-medium text-gray-800 mb-4 flex items-center gap-2">
+            <h3 className="text-base font-medium text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
               <Sliders size={16} className="text-purple-600" aria-hidden="true" />
               数据范围配置
             </h3>
             
             <div className="space-y-4">
-              <p className="text-sm text-gray-600">
+              <p className="text-sm text-gray-600 dark:text-gray-300">
                 配置要显示的数据点范围。默认显示全部数据（从第一个到最后一个数据点）。
               </p>
               
-              <div className="bg-gray-50 p-4 rounded-lg border">
+              <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <label 
                       htmlFor="range-start"
-                      className="block text-sm font-medium text-gray-700 mb-2"
+                      className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                     >
                       起始位置
                     </label>
@@ -282,9 +282,9 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
                       placeholder="0（默认从第一个数据点）"
                       value={config.dataRange.start || ''}
                       onChange={(e) => handleRangeChange('start', parseInt(e.target.value) || 0)}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none text-sm"
+                      className="input-field text-sm"
                     />
-                    <p className="text-xs text-gray-500 mt-1">
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                       第几个数据点开始（从0开始计数）
                     </p>
                   </div>
@@ -292,7 +292,7 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
                   <div>
                     <label 
                       htmlFor="range-end"
-                      className="block text-sm font-medium text-gray-700 mb-2"
+                      className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                     >
                       结束位置
                     </label>
@@ -303,15 +303,15 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
                       placeholder="留空显示到最后"
                       value={config.dataRange.end || ''}
                       onChange={(e) => handleRangeChange('end', e.target.value ? parseInt(e.target.value) : undefined)}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none text-sm"
+                      className="input-field text-sm"
                     />
-                    <p className="text-xs text-gray-500 mt-1">
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                       第几个数据点结束（不包含该点）
                     </p>
                   </div>
                 </div>
 
-                <div className="mt-3 p-3 bg-blue-50 rounded border border-blue-200">
+                <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700">
                   <p className="text-sm text-blue-800 font-medium">
                     示例说明：
                   </p>
@@ -326,10 +326,10 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
           </section>
         </div>
 
-        <div className="flex justify-end gap-3 p-4 border-t bg-gray-50">
+        <div className="flex justify-end gap-3 p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
           <button
             onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
           >
             取消
           </button>
diff --git a/src/components/FileList.jsx b/src/components/FileList.jsx
index 37fb183..036feaf 100644
--- a/src/components/FileList.jsx
+++ b/src/components/FileList.jsx
@@ -4,14 +4,14 @@ import { FileText, X, Settings } from 'lucide-react';
 export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
   if (files.length === 0) {
     return (
-      <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="file-list-heading">
-        <h3 
+      <section className="card" aria-labelledby="file-list-heading">
+        <h3
           id="file-list-heading"
-          className="text-base font-semibold text-gray-800 mb-2"
+          className="card-title mb-2"
         >
           📋 已加载文件
         </h3>
-        <p className="text-gray-500 text-center py-4 text-sm" role="status">
+        <p className="text-gray-500 dark:text-gray-400 text-center py-4 text-sm" role="status">
           📂 暂无文件
         </p>
       </section>
@@ -19,10 +19,10 @@ export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
   }
 
   return (
-    <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="file-list-heading">
-      <h3 
+    <section className="card" aria-labelledby="file-list-heading">
+      <h3
         id="file-list-heading"
-        className="text-base font-semibold text-gray-800 mb-2"
+        className="card-title mb-2"
       >
         📋 已加载文件 ({files.length})
       </h3>
@@ -30,7 +30,7 @@ export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
         {files.map((file, index) => (
           <li
             key={file.id}
-            className="p-2 bg-gray-50 rounded-lg hover:bg-gray-100"
+            className="p-2 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
             role="listitem"
           >
             <div className="flex items-center justify-between">
@@ -40,17 +40,17 @@ export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
                     type="checkbox"
                     checked={file.enabled !== false}
                     onChange={(e) => onFileToggle(index, e.target.checked)}
-                    className="rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                    className="checkbox"
                     aria-describedby={`file-status-${file.id}`}
                   />
-                  <FileText 
-                    size={14} 
-                    className={`${file.enabled !== false ? 'text-blue-600' : 'text-gray-400'}`}
+                  <FileText
+                    size={14}
+                    className={`${file.enabled !== false ? 'text-blue-600' : 'text-gray-400 dark:text-gray-500'}`}
                     aria-hidden="true"
                   />
-                  <span 
+                  <span
                     className={`text-xs font-medium truncate ${
-                      file.enabled !== false ? 'text-gray-700' : 'text-gray-400'
+                      file.enabled !== false ? 'text-gray-700 dark:text-gray-200' : 'text-gray-400 dark:text-gray-500'
                     }`}
                   >
                     {file.name}
@@ -67,7 +67,7 @@ export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
               <div className="flex items-center gap-1">
                 <button
                   onClick={() => onFileConfig(file)}
-                  className="p-1 text-gray-400 hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+                  className="p-1 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
                   title={`配置文件 ${file.name}`}
                   aria-label={`配置文件 ${file.name}`}
                   disabled={file.enabled === false}
@@ -76,7 +76,7 @@ export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
                 </button>
                 <button
                   onClick={() => onFileRemove(index)}
-                  className="p-1 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 rounded"
+                  className="p-1 text-gray-400 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 rounded"
                   title={`删除文件 ${file.name}`}
                   aria-label={`删除文件 ${file.name}`}
                 >
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
index e437d3d..422a3f7 100644
--- a/src/components/FileUpload.jsx
+++ b/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>
diff --git a/src/components/RegexControls.jsx b/src/components/RegexControls.jsx
index 46b0195..044dcf2 100644
--- a/src/components/RegexControls.jsx
+++ b/src/components/RegexControls.jsx
@@ -345,16 +345,16 @@ export function RegexControls({
     return (
       <div className="space-y-2">
         <div>
-          <label className="block text-xs font-medium text-gray-700 mb-1">指标名称</label>
+          <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">指标名称</label>
           <input
             type="text"
             value={config.name}
             onChange={(e) => onConfigChange('name', e.target.value)}
-            className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+            className="input-field text-sm"
           />
           <select
             onChange={(e) => applyPreset(index, e.target.value)}
-            className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md mt-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+            className="input-field mt-1"
             defaultValue=""
           >
             <option value="">选择预设</option>
@@ -365,13 +365,13 @@ export function RegexControls({
         </div>
         {/* 模式选择 */}
         <div>
-          <label className="block text-xs font-medium text-gray-700 mb-1">
+          <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
             匹配模式
           </label>
           <select
             value={config.mode}
             onChange={(e) => onConfigChange('mode', e.target.value)}
-            className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+            className="input-field"
           >
             {Object.entries(MODE_CONFIG).map(([key, modeConfig]) => (
               <option key={key} value={key}>
@@ -379,7 +379,7 @@ export function RegexControls({
               </option>
             ))}
           </select>
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
             <ModeIcon size={10} className="inline mr-1" />
             {MODE_CONFIG[config.mode].description}
           </p>
@@ -388,17 +388,17 @@ export function RegexControls({
         {/* 根据模式显示不同的配置项 */}
         {config.mode === MATCH_MODES.KEYWORD && (
           <div>
-            <label className="block text-xs font-medium text-gray-700 mb-1">
+            <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
               关键词
             </label>
             <input
               type="text"
               value={config.keyword}
               onChange={(e) => onConfigChange('keyword', e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+              className="input-field text-sm"
               placeholder="keyword"
             />
-            <p className="text-xs text-gray-500 mt-1">
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
               支持模糊匹配，如 "loss" 可匹配 "training_loss"
             </p>
           </div>
@@ -406,17 +406,17 @@ export function RegexControls({
 
         {config.mode === MATCH_MODES.REGEX && (
           <div>
-            <label className="block text-xs font-medium text-gray-700 mb-1">
+            <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
               正则表达式
             </label>
             <input
               type="text"
               value={config.regex}
               onChange={(e) => onConfigChange('regex', e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none font-mono"
+              className="input-field text-sm font-mono"
               placeholder="value:\\s*([\\d.eE+-]+)"
             />
-            <p className="text-xs text-gray-500 mt-1">
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
               使用捕获组 () 来提取数值
             </p>
           </div>
@@ -426,17 +426,17 @@ export function RegexControls({
   };
 
   return (
-    <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="regex-controls-heading">
+    <section className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-3" aria-labelledby="regex-controls-heading">
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <Settings 
             size={16} 
-            className="text-gray-600" 
+            className="text-gray-600 dark:text-gray-300" 
             aria-hidden="true"
           />
           <h3 
             id="regex-controls-heading"
-            className="text-base font-semibold text-gray-800"
+            className="text-base font-semibold text-gray-800 dark:text-gray-100"
           >
             数据解析配置
           </h3>
@@ -446,7 +446,7 @@ export function RegexControls({
           {uploadedFiles.length > 0 && (
             <button
               onClick={smartRecommend}
-              className="p-1 text-purple-600 hover:bg-purple-50 rounded transition-colors"
+              className="p-1 text-purple-600 hover:bg-purple-50 dark:hover:bg-purple-900 rounded transition-colors"
               title="智能推荐最佳配置"
             >
               <Zap size={14} />
@@ -454,7 +454,7 @@ export function RegexControls({
           )}
           <button
             onClick={() => setShowPreview(!showPreview)}
-            className="p-1 text-blue-600 hover:bg-blue-50 rounded transition-colors"
+            className="p-1 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors"
             title="预览匹配结果"
           >
             <Eye size={14} />
@@ -464,7 +464,7 @@ export function RegexControls({
       
       <div className="space-y-4">
           {globalParsingConfig.metrics.map((cfg, idx) => (
-            <div key={idx} className="border rounded-lg p-3 relative">
+            <div key={idx} className="border border-gray-200 dark:border-gray-700 rounded-lg p-3 relative">
               <button
                 onClick={() => removeMetric(idx)}
                 className="absolute top-1 right-1 text-red-500"
@@ -472,7 +472,7 @@ export function RegexControls({
               >
                 ×
               </button>
-              <h4 className="text-sm font-medium text-gray-800 mb-2 flex items-center gap-1">
+              <h4 className="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2 flex items-center gap-1">
                 <span className="w-3 h-3 bg-blue-500 rounded-full"></span>
                 {getMetricTitle(cfg, idx)} 解析配置
               </h4>
@@ -481,17 +481,17 @@ export function RegexControls({
           ))}
           <button
             onClick={addMetric}
-            className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
+            className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600"
           >
             + 添加指标
           </button>
 
-          <div className="border rounded-lg p-3">
+          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
             <div className="flex items-center gap-2">
-              <label className="flex items-center text-xs text-gray-700">
+              <label className="flex items-center text-xs text-gray-700 dark:text-gray-300">
                 <input
                   type="checkbox"
-                  className="mr-2"
+                  className="mr-2 checkbox"
                   checked={globalParsingConfig.useStepKeyword || false}
                   onChange={(e) => handleStepToggle(e.target.checked)}
                 />
@@ -500,7 +500,7 @@ export function RegexControls({
               {globalParsingConfig.useStepKeyword && (
                 <input
                   type="text"
-                  className="flex-1 px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+                  className="flex-1 input-field"
                   value={globalParsingConfig.stepKeyword || 'step:'}
                   onChange={(e) => handleStepKeywordChange(e.target.value)}
                   placeholder="step:"
@@ -509,14 +509,14 @@ export function RegexControls({
             </div>
           </div>
 
-        <div className="border rounded-lg p-3">
+        <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
             <div className="flex items-center gap-2 mb-2">
                 <ZoomIn 
                     size={16} 
-                    className="text-gray-600" 
+                    className="text-gray-600 dark:text-gray-300" 
                     aria-hidden="true"
                 />
-                <h4 className="text-base font-semibold text-gray-800">
+                <h4 className="text-base font-semibold text-gray-800 dark:text-gray-100">
                     X轴范围
                 </h4>
             </div>
@@ -526,50 +526,50 @@ export function RegexControls({
                     placeholder="Min"
                     value={xRange.min === undefined ? 0 : xRange.min}
                     onChange={(e) => handleXRangeChange('min', e.target.value)}
-                    className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+                    className="input-field"
                 />
-                <span className="text-gray-500">-</span>
+                <span className="text-gray-500 dark:text-gray-400">-</span>
                 <input
                     type="number"
                     placeholder={xRange.max === undefined && maxStep !== undefined ? `${maxStep}` : 'Max'}
                     value={xRange.max === undefined ? maxStep : xRange.max}
                     onChange={(e) => handleXRangeChange('max', e.target.value)}
-                    className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+                    className="input-field"
                 />
                 <button
                     onClick={() => onXRangeChange({ min: undefined, max: undefined })}
-                    className="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 whitespace-nowrap"
+                    className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 whitespace-nowrap"
                 >
                     复位
                 </button>
             </div>
-            <p className="text-xs text-gray-500 mt-1">
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                 在图表上按住 <kbd>Shift</kbd> 键并拖动鼠标可选择范围，或直接输入数值。
             </p>
         </div>
 
         {/* 预览结果 */}
         {showPreview && uploadedFiles.length > 0 && (
-          <div className="mt-3 p-3 bg-blue-50 rounded border border-blue-200">
+          <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700">
             <h4 className="text-sm font-medium text-blue-800 mb-2">匹配预览</h4>
             <div className="space-y-3 text-xs">
               {Object.entries(previewResults).map(([key, results]) => (
                 results.map((result, idx) => (
-                  <div key={`${key}-${idx}`} className="border-l-4 border-blue-300 pl-3">
+                  <div key={`${key}-${idx}`} className="border-l-4 border-blue-300 dark:border-blue-700 pl-3">
                     <div className="flex items-center justify-between">
                       <span className="font-medium text-blue-700">{key} - {result.fileName}</span>
-                      <span className="text-gray-600">({result.count} 个匹配)</span>
+                      <span className="text-gray-600 dark:text-gray-300">({result.count} 个匹配)</span>
                     </div>
                     {result.examples.length > 0 && (
                       <div className="mt-1 space-y-1">
                         {result.examples.map((example, exIdx) => (
-                          <div key={exIdx} className="text-gray-600 bg-white p-1 rounded text-xs">
+                          <div key={exIdx} className="text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 p-1 rounded text-xs">
                             <span className="font-mono text-blue-600">{example.value}</span>
-                            <span className="text-gray-500 ml-2">(第{example.line}行)</span>
+                            <span className="text-gray-500 dark:text-gray-400 ml-2">(第{example.line}行)</span>
                             {example.format && (
                               <span className="text-purple-600 ml-2">[{example.format}]</span>
                             )}
-                            <div className="text-gray-400 truncate">{example.text}</div>
+                            <div className="text-gray-400 dark:text-gray-500 truncate">{example.text}</div>
                           </div>
                         ))}
                       </div>
@@ -582,7 +582,7 @@ export function RegexControls({
         )}
         
         <div 
-          className="text-xs text-gray-500 p-2 bg-gray-50 rounded"
+          className="text-xs text-gray-500 dark:text-gray-400 p-2 bg-gray-50 dark:bg-gray-700 rounded"
           role="region"
           aria-label="功能说明"
         >
diff --git a/src/components/ResizablePanel.jsx b/src/components/ResizablePanel.jsx
index f3a8769..6b5f3d3 100644
--- a/src/components/ResizablePanel.jsx
+++ b/src/components/ResizablePanel.jsx
@@ -51,7 +51,7 @@ export function ResizablePanel({ children, title, initialHeight = 440, minHeight
       <div className="flex items-center justify-between mb-2">
         <h3 
           id={`panel-title-${title.replace(/\s+/g, '-').toLowerCase()}`}
-          className="text-base font-semibold text-gray-800"
+          className="text-base font-semibold text-gray-800 dark:text-gray-100"
         >
           📊 {title}
         </h3>
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..c7cbc8c
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { Moon, Sun, Monitor } from 'lucide-react';
+
+const themes = ['system', 'light', 'dark'];
+
+function applyTheme(theme) {
+  const root = document.documentElement;
+  const prefersDark = window.matchMedia
+    ? window.matchMedia('(prefers-color-scheme: dark)').matches
+    : false;
+  if (theme === 'dark' || (theme === 'system' && prefersDark)) {
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+  }
+}
+
+export function ThemeToggle({ className = '' }) {
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'system');
+
+  useEffect(() => {
+    applyTheme(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  useEffect(() => {
+    const media = window.matchMedia
+      ? window.matchMedia('(prefers-color-scheme: dark)')
+      : null;
+    const listener = () => theme === 'system' && applyTheme('system');
+    media?.addEventListener('change', listener);
+    return () => media?.removeEventListener('change', listener);
+  }, [theme]);
+
+  const cycleTheme = () => {
+    const next = themes[(themes.indexOf(theme) + 1) % themes.length];
+    setTheme(next);
+  };
+
+  const icons = {
+    system: <Monitor size={16} aria-hidden="true" />,
+    light: <Sun size={16} aria-hidden="true" />,
+    dark: <Moon size={16} aria-hidden="true" />,
+  };
+
+  return (
+    <button
+      onClick={cycleTheme}
+      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}`}
+    >
+      {icons[theme]}
+    </button>
+  );
+}
diff --git a/src/components/__tests__/ThemeToggle.test.jsx b/src/components/__tests__/ThemeToggle.test.jsx
new file mode 100644
index 0000000..9a430c5
--- /dev/null
+++ b/src/components/__tests__/ThemeToggle.test.jsx
@@ -0,0 +1,35 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ThemeToggle } from '../ThemeToggle';
+
+describe('ThemeToggle', () => {
+  beforeEach(() => {
+    window.matchMedia = vi.fn().mockImplementation(() => ({
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+    localStorage.clear();
+    document.documentElement.classList.remove('dark');
+  });
+
+  it('cycles through system, light, and dark themes', () => {
+    render(<ThemeToggle />);
+    const button = screen.getByRole('button', { name: '切换主题' });
+
+    // system mode should follow matchMedia (dark)
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+    // light mode
+    fireEvent.click(button);
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+
+    // dark mode
+    fireEvent.click(button);
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+    // back to system (still dark)
+    fireEvent.click(button);
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+});
diff --git a/src/index.css b/src/index.css
index 3d38cda..8a0cb92 100644
--- a/src/index.css
+++ b/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;
@@ -62,11 +65,42 @@
   }
 }
 
-/* Custom styles */
-.chart-container {
-  position: relative;
-  height: 440px;
-  width: 100%;
+@layer components {
+  .card {
+    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-3;
+  }
+
+  .card-title {
+    @apply text-base font-semibold text-gray-800 dark:text-gray-100;
+  }
+
+  .input-field {
+    @apply w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none dark:bg-gray-700 dark:text-gray-100;
+  }
+
+  .checkbox {
+    @apply rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+  }
+
+  .radio {
+    @apply text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+  }
+
+  .chart-panel {
+    @apply relative bg-white dark:bg-gray-800 rounded-lg shadow-md;
+  }
+
+  .drag-area {
+    @apply border-2 border-dashed border-gray-300 dark:border-gray-600;
+  }
+
+  .drag-area.dragover {
+    @apply border-blue-500 bg-blue-50 dark:bg-blue-900;
+  }
+
+  .resizable-chart-container {
+    @apply relative min-h-[200px] max-h-[600px] resize-y overflow-hidden border border-gray-200 dark:border-gray-700 rounded-lg;
+  }
 }
 
 /* Custom styles */
@@ -76,23 +110,6 @@
   width: 100%;
 }
 
-.chart-panel {
-  position: relative;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.resizable-chart-container {
-  position: relative;
-  min-height: 200px;
-  max-height: 600px;
-  resize: vertical;
-  overflow: hidden;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-}
-
 .resize-handle {
   position: absolute;
   bottom: 0;
@@ -114,22 +131,6 @@
   outline-offset: 2px;
 }
 
-.chart-panel {
-  position: relative;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.drag-area {
-  border: 2px dashed #e2e8f0;
-}
-
-.drag-area.dragover {
-  border-color: #3b82f6;
-  background-color: #dbeafe;
-}
-
 /* Enhanced focus indicators for interactive elements */
 button:focus,
 input:focus,
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..9c8b975 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,18 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App.jsx';
+
+const theme = localStorage.getItem('theme') || 'system';
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+if (theme === 'dark' || (theme === 'system' && prefersDark)) {
+  document.documentElement.classList.add('dark');
+} else {
+  document.documentElement.classList.remove('dark');
+}
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);
diff --git a/tailwind.config.js b/tailwind.config.js
index dca8ba0..6fa4d26 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
diff --git a/vite.config.js b/vite.config.js
index a4038f7..98e9017 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,6 +15,7 @@ export default defineConfig({
   },
   test: {
     environment: 'jsdom',
+    setupFiles: ['./vitest.setup.js'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'lcov'],
diff --git a/vitest.setup.js b/vitest.setup.js
new file mode 100644
index 0000000..2d004af
--- /dev/null
+++ b/vitest.setup.js
@@ -0,0 +1,17 @@
+import { vi } from 'vitest';
+
+if (!window.matchMedia) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}