diff --git a/qihuo_analyzer/__pycache__/__init__.cpython-311.pyc b/qihuo_analyzer/__pycache__/__init__.cpython-311.pyc
index 0106008..f445110 100644
Binary files a/qihuo_analyzer/__pycache__/__init__.cpython-311.pyc and b/qihuo_analyzer/__pycache__/__init__.cpython-311.pyc differ
diff --git a/qihuo_analyzer/core/__pycache__/models.cpython-311.pyc b/qihuo_analyzer/core/__pycache__/models.cpython-311.pyc
index 2c42fba..10476c0 100644
Binary files a/qihuo_analyzer/core/__pycache__/models.cpython-311.pyc and b/qihuo_analyzer/core/__pycache__/models.cpython-311.pyc differ
diff --git a/qihuo_analyzer/data/__pycache__/data_fetcher.cpython-311.pyc b/qihuo_analyzer/data/__pycache__/data_fetcher.cpython-311.pyc
index 377e462..f689264 100644
Binary files a/qihuo_analyzer/data/__pycache__/data_fetcher.cpython-311.pyc and b/qihuo_analyzer/data/__pycache__/data_fetcher.cpython-311.pyc differ
diff --git a/qihuo_analyzer/data/__pycache__/data_storage.cpython-311.pyc b/qihuo_analyzer/data/__pycache__/data_storage.cpython-311.pyc
index f41af78..bfc1fad 100644
Binary files a/qihuo_analyzer/data/__pycache__/data_storage.cpython-311.pyc and b/qihuo_analyzer/data/__pycache__/data_storage.cpython-311.pyc differ
diff --git a/qihuo_analyzer/modules/__pycache__/deepseek_agent.cpython-311.pyc b/qihuo_analyzer/modules/__pycache__/deepseek_agent.cpython-311.pyc
index 72103a4..fe29d00 100644
Binary files a/qihuo_analyzer/modules/__pycache__/deepseek_agent.cpython-311.pyc and b/qihuo_analyzer/modules/__pycache__/deepseek_agent.cpython-311.pyc differ
diff --git a/qihuo_analyzer/modules/__pycache__/fund_flow_monitor.cpython-311.pyc b/qihuo_analyzer/modules/__pycache__/fund_flow_monitor.cpython-311.pyc
index 61b1107..f633db8 100644
Binary files a/qihuo_analyzer/modules/__pycache__/fund_flow_monitor.cpython-311.pyc and b/qihuo_analyzer/modules/__pycache__/fund_flow_monitor.cpython-311.pyc differ
diff --git a/qihuo_analyzer/modules/__pycache__/risk_manager.cpython-311.pyc b/qihuo_analyzer/modules/__pycache__/risk_manager.cpython-311.pyc
index 9803e56..21d059a 100644
Binary files a/qihuo_analyzer/modules/__pycache__/risk_manager.cpython-311.pyc and b/qihuo_analyzer/modules/__pycache__/risk_manager.cpython-311.pyc differ
diff --git a/qihuo_analyzer/modules/__pycache__/rollover_detector.cpython-311.pyc b/qihuo_analyzer/modules/__pycache__/rollover_detector.cpython-311.pyc
index ef7fb85..971a0ab 100644
Binary files a/qihuo_analyzer/modules/__pycache__/rollover_detector.cpython-311.pyc and b/qihuo_analyzer/modules/__pycache__/rollover_detector.cpython-311.pyc differ
diff --git a/qihuo_analyzer/modules/__pycache__/support_resistance.cpython-311.pyc b/qihuo_analyzer/modules/__pycache__/support_resistance.cpython-311.pyc
index a6fe6de..abb3fdf 100644
Binary files a/qihuo_analyzer/modules/__pycache__/support_resistance.cpython-311.pyc and b/qihuo_analyzer/modules/__pycache__/support_resistance.cpython-311.pyc differ
diff --git a/qihuo_analyzer/modules/__pycache__/trend_filter.cpython-311.pyc b/qihuo_analyzer/modules/__pycache__/trend_filter.cpython-311.pyc
index 8de17cf..45ac2a8 100644
Binary files a/qihuo_analyzer/modules/__pycache__/trend_filter.cpython-311.pyc and b/qihuo_analyzer/modules/__pycache__/trend_filter.cpython-311.pyc differ
diff --git a/qihuo_analyzer/utils/__pycache__/config_manager.cpython-311.pyc b/qihuo_analyzer/utils/__pycache__/config_manager.cpython-311.pyc
index e1342aa..6f57ee1 100644
Binary files a/qihuo_analyzer/utils/__pycache__/config_manager.cpython-311.pyc and b/qihuo_analyzer/utils/__pycache__/config_manager.cpython-311.pyc differ
diff --git a/qihuo_analyzer/utils/__pycache__/technical_analysis.cpython-311.pyc b/qihuo_analyzer/utils/__pycache__/technical_analysis.cpython-311.pyc
index 2771879..3072a45 100644
Binary files a/qihuo_analyzer/utils/__pycache__/technical_analysis.cpython-311.pyc and b/qihuo_analyzer/utils/__pycache__/technical_analysis.cpython-311.pyc differ
diff --git a/web/templates/card.html b/web/templates/card.html
index e213a4b..e0fac6d 100644
--- a/web/templates/card.html
+++ b/web/templates/card.html
@@ -12,10 +12,52 @@
             box-sizing: border-box;
         }
         
+        :root {
+            --bg-primary: #f0f2f5;
+            --bg-secondary: #ffffff;
+            --bg-tertiary: #f9fafb;
+            --text-primary: #333333;
+            --text-secondary: #666666;
+            --text-tertiary: #999999;
+            --border-color: #d9d9d9;
+            --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+        }
+        
+        body.dark-theme {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --bg-tertiary: #3d3d3d;
+            --text-primary: #e0e0e0;
+            --text-secondary: #b0b0b0;
+            --text-tertiary: #808080;
+            --border-color: #444444;
+            --header-bg: linear-gradient(135deg, #334155 0%, #1e293b 100%);
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+            --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+        }
+        
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background-color: #f0f2f5;
-            color: #333;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+        }
+        
+        .theme-toggle {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 6px 12px;
+            font-size: 14px;
+            cursor: pointer;
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+        }
+        
+        .theme-toggle:hover {
+            background: var(--bg-secondary);
         }
         
         .container {
@@ -25,12 +67,12 @@
         }
         
         .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--header-bg);
             color: white;
             padding: 24px;
             border-radius: 12px;
             margin-bottom: 24px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            box-shadow: var(--card-shadow);
         }
         
         .header-content {
@@ -59,11 +101,12 @@
         }
         
         .card {
-            background: white;
+            background: var(--bg-secondary);
             border-radius: 12px;
             padding: 24px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: var(--card-shadow);
             margin-bottom: 24px;
+            border: 1px solid var(--border-color);
         }
         
         .card-header {
@@ -72,7 +115,7 @@
             align-items: flex-start;
             margin-bottom: 20px;
             padding-bottom: 16px;
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid var(--border-color);
         }
         
         .symbol-info {
@@ -82,13 +125,13 @@
         .symbol-name {
             font-size: 24px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 4px;
         }
         
         .symbol-code {
             font-size: 14px;
-            color: #999;
+            color: var(--text-tertiary);
         }
         
         .price-info {
@@ -98,7 +141,7 @@
         .current-price {
             font-size: 32px;
             font-weight: 700;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 8px;
         }
         
@@ -111,21 +154,21 @@
         }
         
         .direction-up {
-            background-color: #f6ffed;
+            background-color: rgba(82, 196, 26, 0.1);
             color: #52c41a;
-            border: 1px solid #b7eb8f;
+            border: 1px solid rgba(82, 196, 26, 0.3);
         }
         
         .direction-down {
-            background-color: #fff2f0;
+            background-color: rgba(255, 77, 79, 0.1);
             color: #ff4d4f;
-            border: 1px solid #ffccc7;
+            border: 1px solid rgba(255, 77, 79, 0.3);
         }
         
         .direction-sideways {
-            background-color: #f0f5ff;
+            background-color: rgba(24, 144, 255, 0.1);
             color: #1890ff;
-            border: 1px solid #adc6ff;
+            border: 1px solid rgba(24, 144, 255, 0.3);
         }
         
         .card-body {
@@ -139,7 +182,7 @@
         .section-title {
             font-size: 16px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 12px;
             display: flex;
             align-items: center;
@@ -161,22 +204,23 @@
         }
         
         .stat-item {
-            background-color: #f9fafb;
+            background-color: var(--bg-tertiary);
             padding: 16px;
             border-radius: 8px;
             text-align: center;
+            border: 1px solid var(--border-color);
         }
         
         .stat-label {
             font-size: 12px;
-            color: #666;
+            color: var(--text-secondary);
             margin-bottom: 8px;
         }
         
         .stat-value {
             font-size: 18px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
         }
         
         .win-rate {
@@ -202,23 +246,24 @@
             justify-content: space-between;
             align-items: center;
             padding: 10px 12px;
-            background-color: #f9fafb;
+            background-color: var(--bg-tertiary);
             border-radius: 6px;
+            border: 1px solid var(--border-color);
         }
         
         .indicator-name {
             font-size: 14px;
-            color: #666;
+            color: var(--text-secondary);
         }
         
         .indicator-value {
             font-size: 14px;
             font-weight: 500;
-            color: #333;
+            color: var(--text-primary);
         }
         
         .recommendation {
-            background-color: #f0f5ff;
+            background-color: rgba(24, 144, 255, 0.1);
             border-radius: 8px;
             padding: 16px;
             border-left: 4px solid #1890ff;
@@ -234,14 +279,14 @@
         
         .recommendation-content {
             font-size: 14px;
-            color: #333;
+            color: var(--text-primary);
             line-height: 1.5;
         }
         
         .card-footer {
             text-align: center;
             padding-top: 16px;
-            border-top: 1px solid #f0f0f0;
+            border-top: 1px solid var(--border-color);
         }
         
         .detail-link {
@@ -261,7 +306,7 @@
         .footer {
             text-align: center;
             padding: 20px;
-            color: #999;
+            color: var(--text-tertiary);
             font-size: 14px;
         }
         
@@ -292,8 +337,13 @@
         }
     </style>
 </head>
-<body>
+<body class="dark-theme">
     <div class="container">
+        <!-- 主题切换 -->
+        <div style="text-align: right; margin-bottom: 20px;">
+            <button class="theme-toggle" onclick="toggleTheme()">切换主题</button>
+        </div>
+        
         <!-- 头部 -->
         <div class="header">
             <div class="header-content">
@@ -400,6 +450,28 @@
             const date = new Date();
             return date.toLocaleString('zh-CN');
         }
+        
+        // 主题切换功能
+        function toggleTheme() {
+            const body = document.body;
+            if (body.classList.contains('dark-theme')) {
+                body.classList.remove('dark-theme');
+                localStorage.setItem('theme', 'light');
+            } else {
+                body.classList.add('dark-theme');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+        
+        // 初始化主题
+        document.addEventListener('DOMContentLoaded', function() {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme === 'light') {
+                document.body.classList.remove('dark-theme');
+            } else {
+                document.body.classList.add('dark-theme');
+            }
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/templates/error.html b/web/templates/error.html
index 7906c94..459adc3 100644
--- a/web/templates/error.html
+++ b/web/templates/error.html
@@ -12,10 +12,37 @@
             box-sizing: border-box;
         }
         
+        :root {
+            --bg-primary: #f0f2f5;
+            --bg-secondary: #ffffff;
+            --bg-tertiary: #f9fafb;
+            --text-primary: #333333;
+            --text-secondary: #666666;
+            --text-tertiary: #999999;
+            --border-color: #d9d9d9;
+            --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+        }
+        
+        body.dark-theme {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --bg-tertiary: #3d3d3d;
+            --text-primary: #e0e0e0;
+            --text-secondary: #b0b0b0;
+            --text-tertiary: #808080;
+            --border-color: #444444;
+            --header-bg: linear-gradient(135deg, #334155 0%, #1e293b 100%);
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+            --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+        }
+        
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background-color: #f0f2f5;
-            color: #333;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
         }
         
         .container {
@@ -29,17 +56,18 @@
         }
         
         .error-card {
-            background: white;
+            background: var(--bg-secondary);
             border-radius: 12px;
             padding: 40px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            box-shadow: var(--card-shadow);
             text-align: center;
+            border: 1px solid var(--border-color);
         }
         
         .error-icon {
             width: 80px;
             height: 80px;
-            background-color: #fff2f0;
+            background-color: rgba(255, 77, 79, 0.1);
             color: #ff4d4f;
             border-radius: 50%;
             display: flex;
@@ -47,18 +75,19 @@
             justify-content: center;
             font-size: 40px;
             margin: 0 auto 24px;
+            border: 1px solid rgba(255, 77, 79, 0.3);
         }
         
         .error-title {
             font-size: 24px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 16px;
         }
         
         .error-message {
             font-size: 16px;
-            color: #666;
+            color: var(--text-secondary);
             margin-bottom: 32px;
             line-height: 1.5;
         }
@@ -104,7 +133,7 @@
         }
     </style>
 </head>
-<body>
+<body class="dark-theme">
     <div class="container">
         <div class="error-card">
             <div class="error-icon">⚠️</div>
diff --git a/web/templates/index.html b/web/templates/index.html
index 1eb51f9..ef115d2 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -13,10 +13,37 @@
             box-sizing: border-box;
         }
         
+        :root {
+            --bg-primary: #f0f2f5;
+            --bg-secondary: #ffffff;
+            --bg-tertiary: #f9fafb;
+            --text-primary: #333333;
+            --text-secondary: #666666;
+            --text-tertiary: #999999;
+            --border-color: #d9d9d9;
+            --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+        }
+        
+        body.dark-theme {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --bg-tertiary: #3d3d3d;
+            --text-primary: #e0e0e0;
+            --text-secondary: #b0b0b0;
+            --text-tertiary: #808080;
+            --border-color: #444444;
+            --header-bg: linear-gradient(135deg, #334155 0%, #1e293b 100%);
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+            --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+        }
+        
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background-color: #f0f2f5;
-            color: #333;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
         }
         
         .container {
@@ -26,12 +53,12 @@
         }
         
         .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--header-bg);
             color: white;
             padding: 30px;
             border-radius: 12px;
             margin-bottom: 30px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            box-shadow: var(--card-shadow);
         }
         
         .header h1 {
@@ -46,23 +73,38 @@
         }
         
         .section {
-            background: white;
+            background: var(--bg-secondary);
             border-radius: 12px;
             padding: 24px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: var(--card-shadow);
             margin-bottom: 30px;
         }
         
         .section-title {
             font-size: 20px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 20px;
             display: flex;
             align-items: center;
             justify-content: space-between;
         }
         
+        .theme-toggle {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 6px 12px;
+            font-size: 14px;
+            cursor: pointer;
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+        }
+        
+        .theme-toggle:hover {
+            background: var(--bg-secondary);
+        }
+        
         .search-container {
             margin-bottom: 20px;
         }
@@ -70,11 +112,13 @@
         .search-input {
             width: 100%;
             padding: 12px 16px;
-            border: 1px solid #d9d9d9;
+            border: 1px solid var(--border-color);
             border-radius: 8px;
             font-size: 14px;
             outline: none;
             transition: all 0.3s ease;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
         }
         
         .search-input:focus {
@@ -90,18 +134,19 @@
         }
         
         .symbol-card {
-            background: white;
+            background: var(--bg-secondary);
             border-radius: 12px;
             padding: 20px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: var(--card-shadow);
             transition: transform 0.3s ease, box-shadow 0.3s ease;
             cursor: pointer;
             position: relative;
+            border: 1px solid var(--border-color);
         }
         
         .symbol-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+            box-shadow: var(--card-hover-shadow);
         }
         
         .symbol-header {
@@ -114,12 +159,12 @@
         .symbol-name {
             font-size: 18px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
         }
         
         .symbol-code {
             font-size: 14px;
-            color: #999;
+            color: var(--text-tertiary);
             margin-top: 4px;
         }
         
@@ -130,7 +175,7 @@
         .current-price {
             font-size: 24px;
             font-weight: 700;
-            color: #333;
+            color: var(--text-primary);
         }
         
         .direction-indicator {
@@ -143,21 +188,21 @@
         }
         
         .direction-up {
-            background-color: #f6ffed;
+            background-color: rgba(82, 196, 26, 0.1);
             color: #52c41a;
-            border: 1px solid #b7eb8f;
+            border: 1px solid rgba(82, 196, 26, 0.3);
         }
         
         .direction-down {
-            background-color: #fff2f0;
+            background-color: rgba(255, 77, 79, 0.1);
             color: #ff4d4f;
-            border: 1px solid #ffccc7;
+            border: 1px solid rgba(255, 77, 79, 0.3);
         }
         
         .direction-sideways {
-            background-color: #f0f5ff;
+            background-color: rgba(24, 144, 255, 0.1);
             color: #1890ff;
-            border: 1px solid #adc6ff;
+            border: 1px solid rgba(24, 144, 255, 0.3);
         }
         
         .analysis-grid {
@@ -168,21 +213,22 @@
         }
         
         .analysis-item {
-            background-color: #f9fafb;
+            background-color: var(--bg-tertiary);
             padding: 12px;
             border-radius: 8px;
+            border: 1px solid var(--border-color);
         }
         
         .analysis-label {
             font-size: 12px;
-            color: #666;
+            color: var(--text-secondary);
             margin-bottom: 4px;
         }
         
         .analysis-value {
             font-size: 14px;
             font-weight: 500;
-            color: #333;
+            color: var(--text-primary);
         }
         
         .win-rate {
@@ -205,15 +251,16 @@
         }
         
         .hot-subsection {
-            background: #f9fafb;
+            background: var(--bg-tertiary);
             border-radius: 8px;
             padding: 16px;
+            border: 1px solid var(--border-color);
         }
         
         .hot-subsection-title {
             font-size: 16px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 12px;
         }
         
@@ -231,7 +278,7 @@
             cursor: pointer;
             transition: all 0.3s ease;
             font-size: 12px;
-            color: #999;
+            color: var(--text-tertiary);
         }
         
         .favorite-btn:hover {
@@ -247,7 +294,7 @@
         .footer {
             text-align: center;
             padding: 20px;
-            color: #999;
+            color: var(--text-tertiary);
             font-size: 14px;
             margin-top: 40px;
         }
@@ -267,7 +314,7 @@
         }
     </style>
 </head>
-<body>
+<body class="dark-theme">
     <div class="container">
         <!-- 头部 -->
         <div class="header">
@@ -275,14 +322,19 @@
             <p>基于DeepSeek大模型和量化分析算法的智能决策平台</p>
         </div>
         
+        <!-- 主题切换 -->
+        <div style="text-align: right; margin-bottom: 20px;">
+            <button class="theme-toggle" onclick="toggleTheme()">切换主题</button>
+        </div>
+        
         {% if data_unavailable %}
-        <div style="text-align: center; padding: 60px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);">
+        <div style="text-align: center; padding: 60px; background: var(--bg-secondary); border-radius: 12px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color);">
             <div style="font-size: 48px; margin-bottom: 20px;">⚠️</div>
-            <h2 style="font-size: 24px; font-weight: 600; color: #333; margin-bottom: 16px;">数据不可用</h2>
-            <p style="font-size: 16px; color: #666; margin-bottom: 32px;">{{ message }}</p>
+            <h2 style="font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px;">数据不可用</h2>
+            <p style="font-size: 16px; color: var(--text-secondary); margin-bottom: 32px;">{{ message }}</p>
             <div style="display: flex; justify-content: center; gap: 16px;">
                 <a href="/" style="padding: 10px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500;">重试</a>
-                <a href="javascript:location.reload()" style="padding: 10px 24px; background: #f0f0f0; color: #333; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500;">刷新</a>
+                <a href="javascript:location.reload()" style="padding: 10px 24px; background: var(--bg-tertiary); color: var(--text-primary); text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500; border: 1px solid var(--border-color);">刷新</a>
             </div>
         </div>
         {% else %}
@@ -654,6 +706,28 @@
             }
         });
         
+        // 主题切换功能
+        function toggleTheme() {
+            const body = document.body;
+            if (body.classList.contains('dark-theme')) {
+                body.classList.remove('dark-theme');
+                localStorage.setItem('theme', 'light');
+            } else {
+                body.classList.add('dark-theme');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+        
+        // 初始化主题
+        document.addEventListener('DOMContentLoaded', function() {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme === 'light') {
+                document.body.classList.remove('dark-theme');
+            } else {
+                document.body.classList.add('dark-theme');
+            }
+        });
+        
         // 定时刷新数据
         setInterval(() => {
             window.location.reload();
diff --git a/web/templates/symbol_detail.html b/web/templates/symbol_detail.html
index fe43318..8f0c799 100644
--- a/web/templates/symbol_detail.html
+++ b/web/templates/symbol_detail.html
@@ -13,10 +13,37 @@
             box-sizing: border-box;
         }
         
+        :root {
+            --bg-primary: #f0f2f5;
+            --bg-secondary: #ffffff;
+            --bg-tertiary: #f9fafb;
+            --text-primary: #333333;
+            --text-secondary: #666666;
+            --text-tertiary: #999999;
+            --border-color: #d9d9d9;
+            --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+        }
+        
+        body.dark-theme {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --bg-tertiary: #3d3d3d;
+            --text-primary: #e0e0e0;
+            --text-secondary: #b0b0b0;
+            --text-tertiary: #808080;
+            --border-color: #444444;
+            --header-bg: linear-gradient(135deg, #334155 0%, #1e293b 100%);
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+            --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+        }
+        
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background-color: #f0f2f5;
-            color: #333;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
         }
         
         .container {
@@ -25,13 +52,28 @@
             padding: 20px;
         }
         
+        .theme-toggle {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 6px 12px;
+            font-size: 14px;
+            cursor: pointer;
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+        }
+        
+        .theme-toggle:hover {
+            background: var(--bg-secondary);
+        }
+        
         .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--header-bg);
             color: white;
             padding: 30px;
             border-radius: 12px;
             margin-bottom: 30px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            box-shadow: var(--card-shadow);
         }
         
         .header-content {
@@ -66,11 +108,12 @@
         }
         
         .price-section {
-            background: white;
+            background: var(--bg-secondary);
             border-radius: 12px;
             padding: 24px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: var(--card-shadow);
             margin-bottom: 30px;
+            border: 1px solid var(--border-color);
         }
         
         .price-info {
@@ -87,7 +130,7 @@
         .price-value {
             font-size: 48px;
             font-weight: 700;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 8px;
         }
         
@@ -117,28 +160,29 @@
         
         .stat-label {
             font-size: 14px;
-            color: #666;
+            color: var(--text-secondary);
             margin-bottom: 4px;
         }
         
         .stat-value {
             font-size: 18px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
         }
         
         .chart-section {
-            background: white;
+            background: var(--bg-secondary);
             border-radius: 12px;
             padding: 24px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: var(--card-shadow);
             margin-bottom: 30px;
+            border: 1px solid var(--border-color);
         }
         
         .chart-title {
             font-size: 16px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 20px;
         }
         
@@ -155,19 +199,20 @@
         }
         
         .analysis-card {
-            background: white;
+            background: var(--bg-secondary);
             border-radius: 12px;
             padding: 20px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: var(--card-shadow);
+            border: 1px solid var(--border-color);
         }
         
         .card-title {
             font-size: 16px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 16px;
             padding-bottom: 12px;
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid var(--border-color);
         }
         
         .analysis-item {
@@ -175,18 +220,18 @@
             justify-content: space-between;
             align-items: center;
             padding: 8px 0;
-            border-bottom: 1px solid #f9f9f9;
+            border-bottom: 1px solid var(--border-color);
         }
         
         .analysis-label {
             font-size: 14px;
-            color: #666;
+            color: var(--text-secondary);
         }
         
         .analysis-value {
             font-size: 14px;
             font-weight: 500;
-            color: #333;
+            color: var(--text-primary);
         }
         
         .direction-up {
@@ -202,17 +247,18 @@
         }
         
         .ai-analysis {
-            background: white;
+            background: var(--bg-secondary);
             border-radius: 12px;
             padding: 24px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: var(--card-shadow);
             margin-bottom: 30px;
+            border: 1px solid var(--border-color);
         }
         
         .ai-title {
             font-size: 18px;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 16px;
             display: flex;
             align-items: center;
@@ -233,10 +279,11 @@
         }
         
         .ai-content {
-            background-color: #f9fafb;
+            background-color: var(--bg-tertiary);
             border-radius: 8px;
             padding: 16px;
             margin-bottom: 16px;
+            border: 1px solid var(--border-color);
         }
         
         .recommendation {
@@ -255,13 +302,13 @@
         
         .recommendation-content {
             font-size: 14px;
-            color: #333;
+            color: var(--text-primary);
         }
         
         .footer {
             text-align: center;
             padding: 20px;
-            color: #999;
+            color: var(--text-tertiary);
             font-size: 14px;
             margin-top: 40px;
         }
@@ -289,8 +336,13 @@
         }
     </style>
 </head>
-<body>
+<body class="dark-theme">
     <div class="container">
+        <!-- 主题切换 -->
+        <div style="text-align: right; margin-bottom: 20px;">
+            <button class="theme-toggle" onclick="toggleTheme()">切换主题</button>
+        </div>
+        
         <!-- 头部 -->
         <div class="header">
             <div class="header-content">
@@ -816,6 +868,28 @@
                 chart.resize();
             });
         };
+        
+        // 主题切换功能
+        function toggleTheme() {
+            const body = document.body;
+            if (body.classList.contains('dark-theme')) {
+                body.classList.remove('dark-theme');
+                localStorage.setItem('theme', 'light');
+            } else {
+                body.classList.add('dark-theme');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+        
+        // 初始化主题
+        document.addEventListener('DOMContentLoaded', function() {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme === 'light') {
+                document.body.classList.remove('dark-theme');
+            } else {
+                document.body.classList.add('dark-theme');
+            }
+        });
     </script>
 </body>
 </html>
\ No newline at end of file