增加暗色模式切换

static/css/style.css

@@ -1,3 +1,184 @@
+/* 主题CSS变量定义 */
+:root {
+    /* 主题颜色变量 */
+    --bg-primary: #f5f7fa;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #f8f9fa;
+    --text-primary: #333333;
+    --text-secondary: #555555;
+    --text-muted: #7f8c8d;
+    --border-color: #e9ecef;
+    --primary-color: #3498db;
+    --primary-hover: #2980b9;
+    --success-color: #2ecc71;
+    --danger-color: #e74c3c;
+    --warning-color: #f39c12;
+    --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    
+    /* 基础响应式变量 */
+    --sidebar-width: 250px;
+    --sidebar-mobile-width: 70px;
+    --header-height: 130px;
+    --content-padding: 1rem;
+    --card-min-width: 300px;
+}
+
+.dark {
+    /* 深色主题颜色变量 */
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --bg-tertiary: #3a3a3a;
+    --text-primary: #e2e8f0;
+    --text-secondary: #a0aec0;
+    --text-muted: #718096;
+    --border-color: #4a5568;
+    --primary-color: #4299e1;
+    --primary-hover: #3182ce;
+    --success-color: #48bb78;
+    --danger-color: #f56565;
+    --warning-color: #ed8936;
+    --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* 深色主题下的Tailwind CSS类覆盖 */
+.dark .bg-white {
+    background-color: var(--bg-secondary);
+}
+
+.dark .bg-gray-50 {
+    background-color: var(--bg-tertiary);
+}
+
+.dark .bg-blue-50 {
+    background-color: rgba(66, 153, 225, 0.1);
+}
+
+.dark .bg-green-50 {
+    background-color: rgba(72, 187, 120, 0.1);
+}
+
+.dark .bg-purple-50 {
+    background-color: rgba(159, 122, 234, 0.1);
+}
+
+.dark .bg-yellow-50 {
+    background-color: rgba(237, 153, 54, 0.1);
+}
+
+.dark .bg-red-50 {
+    background-color: rgba(245, 101, 101, 0.1);
+}
+
+.dark .bg-indigo-50 {
+    background-color: rgba(99, 102, 241, 0.1);
+}
+
+.dark .text-gray-500 {
+    color: var(--text-muted);
+}
+
+.dark .text-gray-700 {
+    color: var(--text-secondary);
+}
+
+.dark .text-dark {
+    color: var(--text-primary);
+}
+
+.dark .border-gray-200 {
+    border-color: var(--border-color);
+}
+
+.dark .border-gray-300 {
+    border-color: var(--border-color);
+}
+
+.dark .card-shadow {
+    box-shadow: var(--shadow);
+}
+
+/* 确保表格在深色模式下正确显示 */
+.dark table {
+    background-color: var(--bg-secondary);
+}
+
+.dark th {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+    border-bottom-color: var(--border-color);
+}
+
+.dark td {
+    color: var(--text-primary);
+    border-bottom-color: var(--border-color);
+}
+
+.dark tr:hover {
+    background-color: var(--bg-tertiary);
+}
+
+/* 确保输入框在深色模式下正确显示 */
+.dark input[type="text"],
+.dark input[type="password"],
+.dark input[type="number"],
+.dark select,
+.dark textarea {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+    border-color: var(--border-color);
+}
+
+.dark input[type="text"]:focus,
+.dark input[type="password"]:focus,
+.dark input[type="number"]:focus,
+.dark select:focus,
+.dark textarea:focus {
+    border-color: var(--primary-color);
+}
+
+/* 确保按钮在深色模式下正确显示 */
+.dark .btn {
+    transition: all 0.3s ease;
+}
+
+/* 确保卡片在深色模式下正确显示 */
+.dark .stat-card,
+.dark .chart-card,
+.dark .table-card {
+    background-color: var(--bg-secondary);
+    box-shadow: var(--shadow);
+}
+
+.dark .stat-card i {
+    color: var(--primary-color);
+}
+
+.dark .stat-value {
+    color: var(--text-primary);
+}
+
+.dark .stat-label {
+    color: var(--text-muted);
+}
+
+.dark .chart-card h3 {
+    color: var(--text-primary);
+}
+
+.dark .table-card h3 {
+    color: var(--text-primary);
+}
+
+/* 确保面板在深色模式下正确显示 */
+.dark .panel {
+    background-color: var(--bg-secondary);
+    box-shadow: var(--shadow);
+}
+
+.dark .panel-header h2 {
+    color: var(--text-primary);
+}
+
 /* 全局样式重置 */
 * {
     margin: 0;
@@ -7,27 +188,19 @@
 
 html, body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f5f7fa;
-    color: #333;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
     line-height: 1.6;
     width: 100%;
     height: 100%;
     overflow-x: hidden;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 body {
     position: relative;
 }
 
-/* 基础响应式变量 */
-:root {
-    --sidebar-width: 250px;
-    --sidebar-mobile-width: 70px;
-    --header-height: 130px;
-    --content-padding: 1rem;
-    --card-min-width: 300px;
-}
-
 /* 主容器样式 */
 .container {
     display: flex;
@@ -35,8 +208,9 @@ body {
     min-height: 100vh;
     width: 100%;
     max-width: 100%;
-    background-color: #fff;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+    background-color: var(--bg-secondary);
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
 }
 
 /* 头部样式 */
@@ -85,14 +259,15 @@ header p {
 /* 侧边栏样式 */
 .sidebar {
     width: var(--sidebar-width);
-    background-color: #2c3e50;
-    color: white;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
     padding: 1rem 0;
     flex-shrink: 0;
     overflow-y: auto;
     height: calc(100vh - var(--header-height)); /* 减去header的高度 */
-    transition: width 0.3s ease;
+    transition: width 0.3s ease, background-color 0.3s ease, color 0.3s ease;
     position: relative;
+    border-right: 1px solid var(--border-color);
 }
 
 /* 移动设备侧边栏切换按钮 */
@@ -101,14 +276,15 @@ header p {
     top: calc(var(--header-height) + 10px);
     left: 10px;
     z-index: 100;
-    background-color: #2c3e50;
-    color: white;
-    border: none;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
     border-radius: 4px;
     padding: 8px 12px;
     cursor: pointer;
     display: none;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
 }
 
 /* 响应式布局 - 平板设备 */
@@ -148,13 +324,14 @@ header p {
 }
 
 .nav-item:hover {
-    background-color: #34495e;
+    background-color: var(--bg-tertiary);
     padding-left: 1.75rem;
 }
 
 .nav-item.active {
-    background-color: #3498db;
-    border-left: 4px solid #fff;
+    background-color: var(--primary-color);
+    border-left: 4px solid var(--bg-primary);
+    color: white;
 }
 
 .nav-item i {
@@ -168,10 +345,10 @@ header p {
     flex: 1;
     padding: var(--content-padding);
     overflow-y: auto;
-    background-color: #f8f9fa;
+    background-color: var(--bg-primary);
     min-width: 0; /* 防止flex子元素溢出 */
     height: calc(100vh - var(--header-height)); /* 减去header的高度 */
-    transition: padding-left 0.3s ease;
+    transition: padding-left 0.3s ease, background-color 0.3s ease;
 }
 
 /* Tooltip趋势信息颜色类 - 替代内联style */
@@ -238,12 +415,13 @@ header p {
 /* 面板样式 */
 .panel {
     display: none;
-    background-color: white;
+    background-color: var(--bg-secondary);
     border-radius: 8px;
     padding: 1.5rem;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--shadow);
     box-sizing: border-box;
     overflow: hidden;
+    transition: all 0.3s ease;
 }
 
 .panel.active {
@@ -256,12 +434,13 @@ header p {
     align-items: center;
     margin-bottom: 2rem;
     padding-bottom: 1rem;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .panel-header h2 {
     font-size: 1.5rem;
-    color: #2c3e50;
+    color: var(--text-primary);
+    transition: color 0.3s ease;
 }
 
 /* 状态指示器 */
@@ -316,48 +495,51 @@ header p {
 }
 
 .btn-primary {
-    background-color: #3498db;
+    background-color: var(--primary-color);
     color: white;
 }
 
 .btn-primary:hover {
-    background-color: #2980b9;
+    background-color: var(--primary-hover);
 }
 
 .btn-secondary {
-    background-color: #7f8c8d;
+    background-color: var(--text-muted);
     color: white;
 }
 
 .btn-secondary:hover {
-    background-color: #6c757d;
+    background-color: var(--text-secondary);
 }
 
 .btn-success {
-    background-color: #2ecc71;
+    background-color: var(--success-color);
     color: white;
 }
 
 .btn-success:hover {
-    background-color: #27ae60;
+    background-color: var(--success-color);
+    opacity: 0.9;
 }
 
 .btn-danger {
-    background-color: #e74c3c;
+    background-color: var(--danger-color);
     color: white;
 }
 
 .btn-danger:hover {
-    background-color: #c0392b;
+    background-color: var(--danger-color);
+    opacity: 0.9;
 }
 
 .btn-warning {
-    background-color: #f39c12;
+    background-color: var(--warning-color);
     color: white;
 }
 
 .btn-warning:hover {
-    background-color: #e67e22;
+    background-color: var(--warning-color);
+    opacity: 0.9;
 }
 
 .btn-sm {
@@ -386,12 +568,12 @@ header p {
 }
 
 .stat-card {
-    background-color: white;
+    background-color: var(--bg-secondary);
     border-radius: 8px;
     padding: clamp(1rem, 3vw, 1.5rem); /* 根据屏幕宽度动态调整内边距 */
     text-align: center;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: var(--shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
     min-width: 0; /* 防止内容溢出 */
     display: flex;
     flex-direction: column;
@@ -400,7 +582,7 @@ header p {
 
 .stat-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
 }
 
 /* 卡片布局的响应式优化 */
@@ -449,21 +631,24 @@ header p {
 .stat-card i {
     font-size: 2rem;
     margin-bottom: 1rem;
-    color: #3498db;
+    color: var(--primary-color);
+    transition: color 0.3s ease;
 }
 
 .stat-value {
     font-size: 2rem;
     font-weight: bold;
     margin-bottom: 0.5rem;
-    color: #2c3e50;
+    color: var(--text-primary);
+    transition: color 0.3s ease;
 }
 
 .stat-label {
     font-size: 0.9rem;
-    color: #7f8c8d;
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    transition: color 0.3s ease;
 }
 
 /* 图表容器 */
@@ -475,16 +660,18 @@ header p {
 }
 
 .chart-card {
-    background-color: white;
+    background-color: var(--bg-secondary);
     border-radius: 8px;
     padding: 1.5rem;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
 }
 
 .chart-card h3 {
     margin-bottom: 1rem;
     font-size: 1.2rem;
-    color: #2c3e50;
+    color: var(--text-primary);
+    transition: color 0.3s ease;
 }
 
 /* 表格容器 */
@@ -546,27 +733,30 @@ header p {
 }
 
 .table-card {
-    background-color: white;
+    background-color: var(--bg-secondary);
     border-radius: 8px;
     padding: 1.5rem;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
 }
 
 .table-card h3 {
     margin-bottom: 1rem;
     font-size: 1.2rem;
-    color: #2c3e50;
+    color: var(--text-primary);
+    transition: color 0.3s ease;
 }
 /* 表格样式 */
 .table-wrapper {
     overflow-x: auto;
     border-radius: 8px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background-color: var(--bg-secondary);
+    box-shadow: var(--shadow);
     margin-bottom: 16px;
     display: block;
     width: 100%;
     -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
+    transition: all 0.3s ease;
 }
 
 /* 列宽调节样式 */
@@ -580,16 +770,17 @@ header p {
 .resizable-table th {
     position: relative;
     padding: 0.75rem 1rem;
-    background-color: #f8f9fa;
+    background-color: var(--bg-tertiary);
     font-weight: 600;
-    color: #2c3e50;
-    border-bottom: 1px solid #e9ecef;
+    color: var(--text-primary);
+    border-bottom: 1px solid var(--border-color);
     cursor: pointer;
     user-select: none;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     min-width: 50px;
+    transition: all 0.3s ease;
 }
 
 .resizable-table th::after {
@@ -620,12 +811,14 @@ header p {
 .resizable-table td {
     padding: 0.75rem 1rem;
     text-align: left;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 1px solid var(--border-color);
     word-break: break-word;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 50px;
+    color: var(--text-primary);
+    transition: all 0.3s ease;
 }
 
 /* 确保表格容器正确显示 */
@@ -718,7 +911,8 @@ td.loading {
 }
 
 tr:hover {
-    background-color: #f8f9fa;
+    background-color: var(--bg-tertiary);
+    transition: background-color 0.3s ease;
 }
 
 /* 百分比条样式 */
@@ -762,20 +956,22 @@ tr:hover {
 
 /* 分页控件样式 */
 .pagination-controls {
-    background-color: #ffffff;
+    background-color: var(--bg-secondary);
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow);
     padding: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 16px;
+    transition: all 0.3s ease;
 }
 
 .pagination-info {
     font-size: 14px;
-    color: #666;
+    color: var(--text-muted);
+    transition: color 0.3s ease;
 }
 
 .pagination-buttons {
@@ -794,11 +990,13 @@ tr:hover {
 
 .items-per-page select {
     padding: 6px 12px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color);
     border-radius: 4px;
-    background-color: #fff;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
     font-size: 14px;
     cursor: pointer;
+    transition: all 0.3s ease;
 }
 
 .nav-buttons {
@@ -833,23 +1031,26 @@ tr:hover {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
-    color: #2c3e50;
+    color: var(--text-primary);
+    transition: color 0.3s ease;
 }
 
 .form-group input,
 .form-group select {
     width: 100%;
     padding: 0.75rem;
-    border: 1px solid #ced4da;
+    border: 1px solid var(--border-color);
     border-radius: 4px;
     font-size: 1rem;
-    transition: border-color 0.3s ease;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus {
     outline: none;
-    border-color: #3498db;
+    border-color: var(--primary-color);
 }
 
 .form-row {
@@ -891,9 +1092,10 @@ tr:hover {
 }
 
 #query-result-container {
-    background-color: #f8f9fa;
+    background-color: var(--bg-tertiary);
     border-radius: 8px;
     padding: 1.5rem;
+    transition: all 0.3s ease;
 }
 
 #query-result-container.hidden {
@@ -926,16 +1128,18 @@ tr:hover {
 }
 
 .config-section {
-    background-color: #f8f9fa;
+    background-color: var(--bg-tertiary);
     border-radius: 8px;
     padding: 1.5rem;
     margin-bottom: 2rem;
+    transition: all 0.3s ease;
 }
 
 .config-section h3 {
     margin-bottom: 1.5rem;
     font-size: 1.2rem;
-    color: #2c3e50;
+    color: var(--text-primary);
+    transition: color 0.3s ease;
 }
 
 .config-actions {
@@ -1292,4 +1496,58 @@ tr:hover {
 /* 优化滚动行为 */
 * {
     scroll-behavior: smooth;
+}
+
+/* 暗色模式下排行榜列表项悬停文字颜色 */
+.dark #top-blocked-table .hover\:bg-gray-50:hover .font-medium {
+    color: var(--danger-color);
+}
+
+.dark #top-domains-table .hover\:bg-gray-50:hover .font-medium {
+    color: var(--success-color);
+}
+
+.dark #top-clients-table .hover\:bg-gray-50:hover .font-medium {
+    color: var(--primary-color);
+}
+
+/* 暗色模式下DNS查询历史记录域名颜色 */
+.dark #query-history .flex.items-center .font-medium {
+    color: var(--success-color);
+}
+
+.dark #query-history .flex.items-center .text-danger {
+    color: var(--danger-color);
+}
+
+.dark #query-history .flex.items-center .text-success {
+    color: var(--success-color);
+}
+
+/* 根据状态颜色设置域名颜色 */
+.dark #query-history .flex.items-center:has(.text-danger) .font-medium {
+    color: var(--danger-color);
+}
+
+.dark #query-history .flex.items-center:has(.text-success) .font-medium {
+    color: var(--success-color);
+}
+
+/* 深色模式下Chart.js图例文字颜色 */
+.dark .chartjs-legend {
+    color: var(--text-primary) !important;
+}
+
+.dark .chartjs-legend-item text {
+    fill: var(--text-primary) !important;
+}
+
+/* 强制设置Canvas中文本颜色 */
+.dark canvas {
+    --chart-legend-color: var(--text-primary) !important;
+}
+
+/* 为Chart.js图例添加特定样式 */
+.dark .chart-card {
+    --chart-legend-color: var(--text-primary) !important;
 }