From ba8349b04c13662bc18f771843d1812ce669c3e1 Mon Sep 17 00:00:00 2001
From: anghunk <anghunk@gmail.com>
Date: Tue, 27 Jan 2026 11:07:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E6=B7=BB=E5=8A=A0=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增主题切换功能，支持浅色、深色和跟随系统三种模式
- 创建主题管理组合式函数 useTheme 和 CSS 变量定义
- 在所有视图组件中应用 CSS 变量以实现主题适配
- 在布局头部添加主题切换按钮，支持循环切换主题
- 更新 .gitignore 添加 .trae 文件忽略
---
 .gitignore                                 |   1 +
 cwd-admin/src/App.vue                      |  14 ++-
 cwd-admin/src/assets/theme.css             |  63 +++++++++++
 cwd-admin/src/composables/useTheme.ts      |  57 ++++++++++
 cwd-admin/src/main.ts                      |   1 +
 cwd-admin/src/views/AnalyticsVisitView.vue |  62 ++++++-----
 cwd-admin/src/views/CommentsView.vue       | 124 +++++++++++----------
 cwd-admin/src/views/DataView.vue           |  64 +++++------
 cwd-admin/src/views/LayoutView.vue         |  89 ++++++++++-----
 cwd-admin/src/views/LoginView.vue          |  30 ++---
 cwd-admin/src/views/SettingsView.vue       |  65 +++++------
 cwd-admin/src/views/StatsView.vue          |  61 +++++-----
 12 files changed, 411 insertions(+), 220 deletions(-)
 create mode 100644 cwd-admin/src/assets/theme.css
 create mode 100644 cwd-admin/src/composables/useTheme.ts

diff --git a/.gitignore b/.gitignore
index 766621b..418b24f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -172,3 +172,4 @@ package-lock.json
 wrangler.jsonc
 
 .claude
+.trae
\ No newline at end of file
diff --git a/cwd-admin/src/App.vue b/cwd-admin/src/App.vue
index 08cde1c..1ab9f8b 100644
--- a/cwd-admin/src/App.vue
+++ b/cwd-admin/src/App.vue
@@ -4,7 +4,16 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useTheme } from "./composables/useTheme";
+
+const { initTheme } = useTheme();
+
+onMounted(() => {
+  initTheme();
+});
+</script>
 
 <style>
 html,
@@ -17,6 +26,7 @@ body,
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background-color: #f5f5f5;
+  background-color: var(--bg-body);
+  color: var(--text-primary);
 }
 </style>
diff --git a/cwd-admin/src/assets/theme.css b/cwd-admin/src/assets/theme.css
new file mode 100644
index 0000000..4d946a0
--- /dev/null
+++ b/cwd-admin/src/assets/theme.css
@@ -0,0 +1,63 @@
+:root {
+  /* Light Theme (Default) */
+  --bg-body: #f5f5f5;
+  --bg-card: #ffffff;
+  --bg-header: #24292f;
+  --bg-sider: #f6f8fa;
+  --bg-input: #ffffff;
+  --bg-hover: #eaeef2;
+  --bg-active: #d0ebff;
+  --bg-select: #24292f; /* Header select bg */
+  
+  --text-primary: #24292f;
+  --text-secondary: #57606a;
+  --text-inverse: #ffffff;
+  --text-link: #0969da;
+  
+  --border-color: #d0d7de;
+  --border-input: #d0d7de;
+  --border-header: #57606a;
+  
+  --color-success: #1a7f37;
+  --color-warning: #9a6700;
+  --color-danger: #d1242f;
+  
+  --chart-line: #0ea5e9;
+  --chart-area-start: rgba(56, 189, 248, 0.80);
+  --chart-area-end: rgba(56, 189, 248, 0.2);
+  
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.1);
+  --shadow-login: 0 18px 45px rgba(15, 23, 42, 0.12);
+}
+
+:root.dark {
+  /* Dark Theme */
+  --bg-body: #0d1117;
+  --bg-card: #161b22;
+  --bg-header: #161b22;
+  --bg-sider: #010409;
+  --bg-input: #0d1117;
+  --bg-hover: #21262d;
+  --bg-active: #1f6feb33; /* Semi-transparent blue */
+  --bg-select: #161b22;
+
+  --text-primary: #c9d1d9;
+  --text-secondary: #8b949e;
+  --text-inverse: #f0f6fc;
+  --text-link: #58a6ff;
+  
+  --border-color: #30363d;
+  --border-input: #30363d;
+  --border-header: #30363d;
+  
+  --color-success: #3fb950;
+  --color-warning: #d29922;
+  --color-danger: #f85149;
+  
+  --chart-line: #38bdf8;
+  --chart-area-start: rgba(56, 189, 248, 0.50);
+  --chart-area-end: rgba(56, 189, 248, 0.1);
+  
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.5);
+  --shadow-login: 0 18px 45px rgba(0, 0, 0, 0.4);
+}
diff --git a/cwd-admin/src/composables/useTheme.ts b/cwd-admin/src/composables/useTheme.ts
new file mode 100644
index 0000000..608d3a3
--- /dev/null
+++ b/cwd-admin/src/composables/useTheme.ts
@@ -0,0 +1,57 @@
+import { ref } from 'vue';
+
+export type Theme = 'light' | 'dark' | 'system';
+
+const STORAGE_KEY = 'cwd_admin_theme';
+const theme = ref<Theme>('system');
+
+export function useTheme() {
+  function applyTheme() {
+    if (typeof window === 'undefined') return;
+    
+    const root = document.documentElement;
+    const isDark =
+      theme.value === 'dark' ||
+      (theme.value === 'system' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+    if (isDark) {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+  }
+
+  function setTheme(newTheme: Theme) {
+    theme.value = newTheme;
+    localStorage.setItem(STORAGE_KEY, newTheme);
+    applyTheme();
+  }
+
+  function initTheme() {
+    if (typeof window === 'undefined') return;
+
+    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
+    if (stored && ['light', 'dark', 'system'].includes(stored)) {
+      theme.value = stored;
+    } else {
+      theme.value = 'system';
+    }
+    applyTheme();
+
+    // Listen for system changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    // Remove existing listener to avoid duplicates if init is called multiple times (though it shouldn't be)
+    mediaQuery.onchange = () => {
+      if (theme.value === 'system') {
+        applyTheme();
+      }
+    };
+  }
+
+  return {
+    theme,
+    setTheme,
+    initTheme
+  };
+}
diff --git a/cwd-admin/src/main.ts b/cwd-admin/src/main.ts
index 69181f8..f68f42b 100644
--- a/cwd-admin/src/main.ts
+++ b/cwd-admin/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
+import './assets/theme.css';
 import App from './App.vue';
 import { router } from './router';
 
diff --git a/cwd-admin/src/views/AnalyticsVisitView.vue b/cwd-admin/src/views/AnalyticsVisitView.vue
index b682fe2..e5a3fe4 100644
--- a/cwd-admin/src/views/AnalyticsVisitView.vue
+++ b/cwd-admin/src/views/AnalyticsVisitView.vue
@@ -489,7 +489,7 @@ watch(domainFilter, () => {
 .page-title {
   margin: 0;
   font-size: 18px;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .toolbar {
@@ -509,21 +509,23 @@ watch(domainFilter, () => {
   padding: 8px 8px;
   box-sizing: border-box;
   font-size: 13px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  background-color: #ffffff;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
 }
 
 .card {
-  background-color: #ffffff;
+  background-color: var(--bg-card);
   border-radius: 6px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   padding: 16px 18px;
 }
 
 .card-title {
   margin: 0 0 12px;
   font-size: 16px;
+  color: var(--text-primary);
 }
 
 .card-title-row {
@@ -536,12 +538,12 @@ watch(domainFilter, () => {
 
 .page-hint {
   font-size: 14px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 .page-error {
   font-size: 14px;
-  color: #d1242f;
+  color: var(--color-danger);
 }
 
 .stats-grid {
@@ -553,20 +555,20 @@ watch(domainFilter, () => {
 .stats-item {
   padding: 10px 12px;
   border-radius: 6px;
-  background-color: #f6f8fa;
-  border: 1px solid #d0d7de;
+  background-color: var(--bg-sider);
+  border: 1px solid var(--border-color);
 }
 
 .stats-label {
   font-size: 14px;
-  color: #57606a;
+  color: var(--text-secondary);
   margin-bottom: 4px;
 }
 
 .stats-value {
   font-size: 26px;
   font-weight: 600;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .domain-table-wrapper {
@@ -576,7 +578,7 @@ watch(domainFilter, () => {
 }
 
 .domain-table {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   min-width: 520px;
   overflow: hidden;
@@ -584,24 +586,30 @@ watch(domainFilter, () => {
 
 .domain-table-header {
   display: flex;
-  background-color: #f6f8fa;
+  background-color: var(--bg-sider);
+  color: var(--text-secondary);
 }
 
 .domain-table-row {
   display: flex;
-  border-top: 1px solid #eaeae0;
+  border-top: 1px solid var(--border-color);
 }
 
 .domain-cell {
   flex: 1;
   padding: 10px 10px;
   font-size: 14px;
-  color: #24292f;
+  color: var(--text-primary);
   box-sizing: border-box;
 }
 
 .domain-cell a {
-  color: #57606a;
+  color: var(--text-link);
+  text-decoration: none;
+}
+
+.domain-cell a:hover {
+  text-decoration: underline;
 }
 
 .domain-cell-title {
@@ -688,24 +696,24 @@ watch(domainFilter, () => {
   padding: 10px 14px;
   border-radius: 6px;
   font-size: 13px;
-  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
+  box-shadow: var(--shadow-card);
   z-index: 1000;
 }
 
 .toast-success {
-  background-color: #1a7f37;
-  color: #ffffff;
+  background-color: var(--color-success);
+  color: var(--text-inverse);
 }
 
 .toast-error {
-  background-color: #d1242f;
-  color: #ffffff;
+  background-color: var(--color-danger);
+  color: var(--text-inverse);
 }
 
 .visit-tabs {
   display: inline-flex;
   border-radius: 999px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   overflow: hidden;
 }
 
@@ -713,18 +721,18 @@ watch(domainFilter, () => {
   padding: 4px 10px;
   font-size: 12px;
   border: none;
-  background-color: #ffffff;
-  color: #57606a;
+  background-color: var(--bg-card);
+  color: var(--text-secondary);
   cursor: pointer;
 }
 
 .visit-tab + .visit-tab {
-  border-left: 1px solid #d0d7de;
+  border-left: 1px solid var(--border-color);
 }
 
 .visit-tab-active {
-  background-color: #0969da;
-  color: #ffffff;
+  background-color: var(--primary-color);
+  color: var(--text-inverse);
 }
 
 @media (max-width: 768px) {
diff --git a/cwd-admin/src/views/CommentsView.vue b/cwd-admin/src/views/CommentsView.vue
index 4e19b3a..8fab2d8 100644
--- a/cwd-admin/src/views/CommentsView.vue
+++ b/cwd-admin/src/views/CommentsView.vue
@@ -577,7 +577,7 @@ watch(domainFilter, () => {
 .page-title {
   margin: 0;
   font-size: 18px;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .toolbar {
@@ -602,16 +602,18 @@ watch(domainFilter, () => {
   padding: 8px 8px;
   box-sizing: border-box;
   font-size: 13px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  background-color: #ffffff;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
 }
 
 .toolbar-button {
   padding: 6px 10px;
   border-radius: 4px;
-  border: 1px solid #d0d7de;
-  background-color: #f6f8fa;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-sider);
+  color: var(--text-primary);
   cursor: pointer;
   font-size: 14px;
   min-width: 70px;
@@ -619,17 +621,17 @@ watch(domainFilter, () => {
 
 .page-hint {
   font-size: 14px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 .page-error {
   font-size: 14px;
-  color: #d1242f;
+  color: var(--color-danger);
 }
 
 .comment-table {
-  background-color: #ffffff;
-  border: 1px solid #d0d7de;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   overflow: hidden;
   overflow-x: auto;
@@ -637,12 +639,12 @@ watch(domainFilter, () => {
 
 .table-header {
   display: flex;
-  background-color: #f6f8fa;
+  background-color: var(--bg-sider);
 }
 
 .table-row {
   display: flex;
-  /* border-bottom: 1px solid #eaeae0; */
+  /* border-bottom: 1px solid var(--border-color); */
 }
 
 .table-row:last-child {
@@ -650,18 +652,18 @@ watch(domainFilter, () => {
 }
 
 .table-row:hover .table-cell {
-  background-color: #f8f9fa;
+  background-color: var(--bg-hover);
 }
 
 .table-cell {
   padding: 10px 12px;
   font-size: 13px;
-  color: #24292f;
+  color: var(--text-primary);
   display: flex;
   align-items: center;
   box-sizing: border-box;
   overflow: hidden;
-  border-bottom: 1px solid #eaeae0;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .table-cell-id {
@@ -715,15 +717,15 @@ watch(domainFilter, () => {
 
 .table-header .table-cell {
   font-weight: 500;
-  color: #57606a;
+  color: var(--text-secondary);
   align-items: center;
-  background-color: #f6f8fa;
-  border-bottom: 1px solid #d0d7de;
+  background-color: var(--bg-sider);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .cell-id {
   font-size: 12px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 .cell-author-name {
@@ -734,7 +736,7 @@ watch(domainFilter, () => {
 
 .cell-author-email {
   font-size: 12px;
-  color: #57606a;
+  color: var(--text-secondary);
   word-break: break-all;
   margin-bottom: 2px;
 }
@@ -757,7 +759,7 @@ watch(domainFilter, () => {
 
 .cell-path {
   font-size: 13px;
-  color: #2774cb;
+  color: var(--text-link);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -770,7 +772,7 @@ watch(domainFilter, () => {
 
 .cell-time {
   font-size: 12px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 .cell-author-wrapper {
@@ -805,23 +807,23 @@ watch(domainFilter, () => {
 }
 
 .cell-status-approved {
-  color: #1a7f37;
-  background-color: #e7f5eb;
+  color: var(--color-success);
+  background-color: rgba(26, 127, 55, 0.1); /* Simplified bg based on color */
 }
 
 .cell-status-pending {
-  color: #9a6700;
-  background-color: #fff8c5;
+  color: var(--color-warning);
+  background-color: rgba(154, 103, 0, 0.1);
 }
 
 .cell-status-rejected {
-  color: #d1242f;
-  background-color: #ffebe9;
+  color: var(--color-danger);
+  background-color: rgba(209, 36, 47, 0.1);
 }
 
 .cell-likes-number {
-  color: #d1242f;
-  background-color: #ffebe9;
+  color: var(--color-danger);
+  background-color: rgba(209, 36, 47, 0.1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -829,14 +831,16 @@ watch(domainFilter, () => {
 }
 
 .cell-pin-flag {
-  color: #825802;
+  color: #825802; /* Maybe var(--color-warning)? */
   background-color: #f7c848;
 }
 
 .status-select {
   padding: 3px 8px;
   border-radius: 4px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-input);
+  color: var(--text-primary);
   font-size: 13px;
   cursor: pointer;
 }
@@ -850,14 +854,15 @@ watch(domainFilter, () => {
 .table-action {
   padding: 3px 8px;
   border-radius: 4px;
-  border: 1px solid #d0d7de;
-  background-color: #ffffff;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-input);
+  color: var(--text-primary);
   font-size: 13px;
   cursor: pointer;
 }
 
 .table-action:hover {
-  background-color: #f6f8fa;
+  background-color: var(--bg-hover);
 }
 
 .table-action:disabled {
@@ -866,18 +871,18 @@ watch(domainFilter, () => {
 }
 
 .table-action-danger {
-  border-color: #d1242f;
-  color: #d1242f;
+  border-color: var(--color-danger);
+  color: var(--color-danger);
 }
 
 .table-action-danger:hover {
-  background-color: #ffebe9;
+  background-color: rgba(209, 36, 47, 0.1);
 }
 
 .table-empty {
   padding: 32px;
   text-align: center;
-  color: #57606a;
+  color: var(--text-secondary);
   font-size: 13px;
 }
 
@@ -895,8 +900,9 @@ watch(domainFilter, () => {
   min-width: 28px;
   padding: 4px 8px;
   border-radius: 4px;
-  border: 1px solid #d0d7de;
-  background-color: #f6f8fa;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-sider);
+  color: var(--text-primary);
   font-size: 12px;
   cursor: pointer;
   box-sizing: border-box;
@@ -908,15 +914,15 @@ watch(domainFilter, () => {
 }
 
 .pagination-button-active {
-  background-color: #0969da;
-  color: #ffffff;
-  border-color: #0969da;
+  background-color: var(--primary-color);
+  color: var(--text-inverse);
+  border-color: var(--primary-color);
 }
 
 .pagination-ellipsis {
   padding: 0 2px;
   font-size: 12px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 .pagination-jump {
@@ -924,7 +930,7 @@ watch(domainFilter, () => {
   align-items: center;
   gap: 4px;
   font-size: 12px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 .pagination-input {
@@ -933,7 +939,9 @@ watch(domainFilter, () => {
   box-sizing: border-box;
   padding: 2px 4px;
   border-radius: 4px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-input);
+  color: var(--text-primary);
   font-size: 12px;
 }
 
@@ -959,9 +967,9 @@ watch(domainFilter, () => {
 }
 
 .modal {
-  background-color: #ffffff;
+  background-color: var(--bg-card);
   border-radius: 0;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-card);
   width: 100%;
   max-width: 600px;
   padding: 20px 20px 24px;
@@ -977,7 +985,7 @@ watch(domainFilter, () => {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .modal-body {
@@ -1002,14 +1010,14 @@ watch(domainFilter, () => {
 }
 
 .modal-btn.primary {
-  background-color: #0969da;
-  color: #ffffff;
+  background-color: var(--primary-color);
+  color: var(--text-inverse);
 }
 
 .modal-btn.secondary {
-  background-color: #f6f8fa;
-  border-color: #d0d7de;
-  color: #24292f;
+  background-color: var(--bg-sider);
+  border-color: var(--border-color);
+  color: var(--text-primary);
 }
 
 .modal-btn:hover {
@@ -1024,19 +1032,21 @@ watch(domainFilter, () => {
 
 .form-label {
   font-size: 13px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 .form-input {
   padding: 8px 10px;
   border-radius: 4px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-input);
+  color: var(--text-primary);
   font-size: 13px;
   outline: none;
 }
 
 .form-input:focus {
-  border-color: #0969da;
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
 }
 
diff --git a/cwd-admin/src/views/DataView.vue b/cwd-admin/src/views/DataView.vue
index a4c256f..9a9babe 100644
--- a/cwd-admin/src/views/DataView.vue
+++ b/cwd-admin/src/views/DataView.vue
@@ -409,13 +409,13 @@ async function executeImport(comments: any[]) {
 .page-title {
   margin: 0;
   font-size: 18px;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .card {
-  background-color: #ffffff;
+  background-color: var(--bg-card);
   border-radius: 6px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   padding: 16px 18px;
   margin-bottom: 1em;
 }
@@ -423,6 +423,7 @@ async function executeImport(comments: any[]) {
 .card-title {
   margin: 0 0 12px;
   font-size: 15px;
+  color: var(--text-primary);
 }
 
 .stats-grid {
@@ -434,55 +435,56 @@ async function executeImport(comments: any[]) {
 .stats-item {
   padding: 10px 12px;
   border-radius: 6px;
-  background-color: #f6f8fa;
-  border: 1px solid #d0d7de;
+  background-color: var(--bg-sider);
+  border: 1px solid var(--border-color);
 }
 
 .stats-label {
   font-size: 12px;
-  color: #57606a;
+  color: var(--text-secondary);
   margin-bottom: 4px;
 }
 
 .stats-value {
   font-size: 18px;
   font-weight: 600;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .stats-value-approved {
-  color: #1a7f37;
+  color: var(--color-success);
 }
 
 .stats-value-pending {
-  color: #9a6700;
+  color: var(--color-warning);
 }
 
 .stats-value-rejected {
-  color: #d1242f;
+  color: var(--color-danger);
 }
 
 .domain-table {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   overflow: hidden;
 }
 
 .domain-table-header {
   display: flex;
-  background-color: #f6f8fa;
+  background-color: var(--bg-sider);
+  color: var(--text-secondary);
 }
 
 .domain-table-row {
   display: flex;
-  border-top: 1px solid #eaeae0;
+  border-top: 1px solid var(--border-color);
 }
 
 .domain-cell {
   flex: 1;
   padding: 8px 10px;
   font-size: 13px;
-  color: #24292f;
+  color: var(--text-primary);
   box-sizing: border-box;
 }
 
@@ -493,7 +495,7 @@ async function executeImport(comments: any[]) {
 
 .card-desc {
   font-size: 14px;
-  color: #57606a;
+  color: var(--text-secondary);
   margin: 0 0 16px;
 }
 
@@ -506,8 +508,8 @@ async function executeImport(comments: any[]) {
   padding: 8px 14px;
   border-radius: 4px;
   border: none;
-  background-color: #0969da;
-  color: #ffffff;
+  background-color: var(--primary-color);
+  color: var(--text-inverse);
   font-size: 14px;
   cursor: pointer;
   min-width: 100px;
@@ -527,22 +529,22 @@ async function executeImport(comments: any[]) {
 
 .form-label {
   font-size: 14px;
-  color: #24292f;
+  color: var(--text-primary);
   font-weight: 500;
 }
 
 .form-select {
   padding: 6px 8px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
+  color: var(--text-primary);
+  background-color: var(--bg-input);
   outline: none;
 }
 
 .form-select:focus {
-  border-color: #0969da;
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3);
 }
 
@@ -556,32 +558,32 @@ async function executeImport(comments: any[]) {
   padding: 10px 14px;
   border-radius: 6px;
   font-size: 13px;
-  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
+  box-shadow: var(--shadow-card);
   z-index: 1000;
 }
 
 .toast-success {
-  background-color: #1a7f37;
-  color: #ffffff;
+  background-color: var(--color-success);
+  color: var(--text-inverse);
 }
 
 .toast-error {
-  background-color: #d1242f;
-  color: #ffffff;
+  background-color: var(--color-danger);
+  color: var(--text-inverse);
 }
 
 .log-container {
   margin-top: 16px;
   padding: 12px;
-  background-color: #f6f8fa;
+  background-color: var(--bg-sider);
   border-radius: 6px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
 }
 
 .log-title {
   font-size: 13px;
   font-weight: 600;
-  color: #24292f;
+  color: var(--text-primary);
   margin-bottom: 8px;
 }
 
@@ -597,7 +599,7 @@ async function executeImport(comments: any[]) {
   font-size: 12px;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
     monospace;
-  color: #57606a;
+  color: var(--text-secondary);
   line-height: 1.5;
 }
 </style>
diff --git a/cwd-admin/src/views/LayoutView.vue b/cwd-admin/src/views/LayoutView.vue
index f5cb116..66c6a87 100644
--- a/cwd-admin/src/views/LayoutView.vue
+++ b/cwd-admin/src/views/LayoutView.vue
@@ -31,8 +31,20 @@
           <a class="layout-button" href="https://github.com/anghunk/cwd" target="_blank">
             Github
           </a>
+           <button class="layout-button" @click="cycleTheme" :title="themeTitle" type="button">
+          <svg v-if="theme === 'light'" viewBox="0 0 24 24" width="16" height="16">
+            <path d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"/>
+          </svg>
+          <svg v-else-if="theme === 'dark'" viewBox="0 0 24 24" width="16" height="16">
+            <path d="M20 12.986c-.52.095-1.056.15-1.6.15-5.238 0-9.486-4.248-9.486-9.486 0-.544.055-1.08.15-1.6-5.275.986-9.264 5.615-9.264 11.123 0 6.255 5.07 11.325 11.325 11.325 5.508 0 10.137-3.989 11.123-9.264a9.66 9.66 0 0 1-2.248.752z" fill="currentColor"/>
+          </svg>
+          <svg v-else viewBox="0 0 24 24" width="16" height="16">
+            <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zM6 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6zm-3 14a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-1z" fill="currentColor"/>
+          </svg>
+        </button>
           <button class="layout-button" @click="handleLogout">退出</button>
         </div>
+       
         <button
           class="layout-actions-toggle"
           @click="toggleActions"
@@ -115,18 +127,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, provide } from "vue";
+import { ref, onMounted, watch, provide, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { logoutAdmin, fetchDomainList } from "../api/admin";
+import { useTheme } from "../composables/useTheme";
 
 const DOMAIN_STORAGE_KEY = "cwd_admin_domain_filter";
 
 const router = useRouter();
 const route = useRoute();
+const { theme, setTheme } = useTheme();
 
 const isMobileSiderOpen = ref(false);
 const isActionsOpen = ref(false);
 
+const themeTitle = computed(() => {
+  if (theme.value === 'light') return '明亮模式';
+  if (theme.value === 'dark') return '暗黑模式';
+  return '跟随系统';
+});
+
+function cycleTheme() {
+  if (theme.value === 'system') setTheme('light');
+  else if (theme.value === 'light') setTheme('dark');
+  else setTheme('system');
+}
+
 const storedDomain =
   typeof window !== "undefined"
     ? window.localStorage.getItem(DOMAIN_STORAGE_KEY) || ""
@@ -245,8 +271,9 @@ function handleLogoutFromActions() {
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
-  background-color: #24292f;
-  color: #ffffff;
+  background-color: var(--bg-header);
+  color: var(--text-inverse);
+  border-bottom: 1px solid var(--border-header);
 }
 
 .layout-title {
@@ -269,9 +296,9 @@ function handleLogoutFromActions() {
 .layout-domain-select {
   padding: 6px 8px;
   border-radius: 4px;
-  border: 1px solid #57606a;
-  background-color: #24292f;
-  color: #ffffff;
+  border: 1px solid var(--border-header);
+  background-color: var(--bg-select);
+  color: var(--text-inverse);
   font-size: 13px;
 }
 
@@ -284,15 +311,18 @@ function handleLogoutFromActions() {
   text-decoration: none;
   padding: 6px 10px;
   border-radius: 4px;
-  border: 1px solid #57606a;
-  background-color: #24292f;
-  color: #ffffff;
+  border: 1px solid var(--border-header);
+  background-color: var(--bg-select);
+  color: var(--text-inverse);
   cursor: pointer;
   font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .layout-button:hover {
-  background-color: #32383f;
+  background-color: var(--border-header);
 }
 
 .layout-actions-toggle {
@@ -301,9 +331,9 @@ function handleLogoutFromActions() {
   justify-content: center;
   padding: 6px;
   border-radius: 4px;
-  border: 1px solid #57606a;
-  background-color: #24292f;
-  color: #ffffff;
+  border: 1px solid var(--border-header);
+  background-color: var(--bg-select);
+  color: var(--text-inverse);
   cursor: pointer;
 }
 
@@ -319,8 +349,8 @@ function handleLogoutFromActions() {
 
 .layout-sider {
   width: 180px;
-  background-color: #f6f8fa;
-  border-right: 1px solid #d0d7de;
+  background-color: var(--bg-sider);
+  border-right: 1px solid var(--border-color);
 }
 
 .menu {
@@ -333,16 +363,17 @@ function handleLogoutFromActions() {
   padding: 10px 16px;
   cursor: pointer;
   font-size: 15px;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .menu-item:hover {
-  background-color: #eaeef2;
+  background-color: var(--bg-hover);
 }
 
 .menu-item.active {
-  background-color: #d0ebff;
+  background-color: var(--bg-active);
   font-weight: 600;
+  color: var(--primary-color);
 }
 
 .layout-content {
@@ -357,9 +388,9 @@ function handleLogoutFromActions() {
   justify-content: center;
   padding: 6px 10px;
   border-radius: 4px;
-  border: 1px solid #57606a;
-  background-color: #24292f;
-  color: #ffffff;
+  border: 1px solid var(--border-header);
+  background-color: var(--bg-select);
+  color: var(--text-inverse);
   cursor: pointer;
   font-size: 13px;
 }
@@ -397,7 +428,7 @@ function handleLogoutFromActions() {
     bottom: 0;
     width: 220px;
     max-width: 80%;
-    border-right: 1px solid #d0d7de;
+    border-right: 1px solid var(--border-color);
     transform: translateX(-100%);
     transition: transform 0.2s ease-out;
     z-index: 1000;
@@ -434,10 +465,10 @@ function handleLogoutFromActions() {
     position: fixed;
     top: 56px;
     right: 12px;
-    background-color: #ffffff;
-    border: 1px solid #d0d7de;
+    background-color: var(--bg-card);
+    border: 1px solid var(--border-color);
     border-radius: 6px;
-    box-shadow: 0 8px 24px rgba(140, 149, 159, 0.3);
+    box-shadow: var(--shadow-card);
     padding: 6px 0;
     min-width: 160px;
     z-index: 1100;
@@ -452,20 +483,20 @@ function handleLogoutFromActions() {
     border: none;
     text-align: left;
     cursor: pointer;
-    color: #24292f;
+    color: var(--text-primary);
     width: 100%;
   }
 
   .layout-actions-item:hover {
-    background-color: #f6f8fa;
+    background-color: var(--bg-hover);
   }
 
   .layout-actions-item-danger {
-    color: #d1242f;
+    color: var(--color-danger);
   }
 
   .layout-actions-item-danger:hover {
-    background-color: #ffebe9;
+    background-color: rgba(209, 36, 47, 0.1);
   }
 }
 </style>
diff --git a/cwd-admin/src/views/LoginView.vue b/cwd-admin/src/views/LoginView.vue
index a331a44..845cb33 100644
--- a/cwd-admin/src/views/LoginView.vue
+++ b/cwd-admin/src/views/LoginView.vue
@@ -88,15 +88,16 @@ async function handleSubmit() {
   justify-content: center;
   min-height: 100vh;
   padding: 24px 16px;
-  background: radial-gradient(circle at top, #eef2ff 0, #f9fafb 45%, #f3f4f6 100%);
+  background: var(--bg-body);
+  background: radial-gradient(circle at top, var(--bg-hover) 0, var(--bg-body) 100%);
 }
 
 .login-card {
-  background-color: #ffffff;
+  background-color: var(--bg-card);
   padding: 32px 32px 28px;
   border-radius: 12px;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow-login);
   width: 100%;
   max-width: 420px;
   box-sizing: border-box;
@@ -106,7 +107,7 @@ async function handleSubmit() {
   margin: 0;
   font-size: 24px;
   text-align: center;
-  color: #111827;
+  color: var(--text-primary);
   letter-spacing: 0.03em;
 }
 
@@ -114,7 +115,7 @@ async function handleSubmit() {
   margin: 8px 0 28px;
   font-size: 13px;
   text-align: center;
-  color: #6b7280;
+  color: var(--text-secondary);
 }
 
 .login-form {
@@ -131,28 +132,29 @@ async function handleSubmit() {
 
 .form-label {
   font-size: 14px;
-  color: #4b5563;
+  color: var(--text-secondary);
 }
 
 .form-input {
   padding: 9px 12px;
   border-radius: 8px;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--border-color);
   font-size: 14px;
   outline: none;
-  background-color: #f9fafb;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
   transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
 }
 
 .form-input:focus {
-  border-color: #2563eb;
-  background-color: #ffffff;
+  border-color: var(--primary-color);
+  background-color: var(--bg-input);
   box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
 }
 
 .form-error {
   font-size: 13px;
-  color: #dc2626;
+  color: var(--color-danger);
   margin-top: 4px;
 }
 
@@ -161,8 +163,8 @@ async function handleSubmit() {
   padding: 10px 0;
   border-radius: 999px;
   border: none;
-  background: linear-gradient(135deg, #2563eb, #1d4ed8);
-  color: #ffffff;
+  background: var(--primary-color);
+  color: var(--text-inverse);
   font-size: 15px;
   cursor: pointer;
   font-weight: 500;
diff --git a/cwd-admin/src/views/SettingsView.vue b/cwd-admin/src/views/SettingsView.vue
index f991e46..c8a9881 100644
--- a/cwd-admin/src/views/SettingsView.vue
+++ b/cwd-admin/src/views/SettingsView.vue
@@ -668,13 +668,13 @@ onMounted(() => {
 .page-title {
   margin: 0;
   font-size: 18px;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .card {
-  background-color: #ffffff;
+  background-color: var(--bg-card);
   border-radius: 6px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   padding: 12px 18px;
   margin-bottom: 1em;
 }
@@ -693,11 +693,12 @@ onMounted(() => {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
+  color: var(--text-primary);
 }
 
 .card-icon {
   font-size: 12px;
-  color: #57606a;
+  color: var(--text-secondary);
   transition: transform 0.2s ease;
 }
 
@@ -713,12 +714,12 @@ onMounted(() => {
   margin: 0 0 12px;
   font-size: 15px;
   font-weight: 600;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .divider {
   height: 1px;
-  background-color: #d0d7de;
+  background-color: var(--border-color);
   margin: 16px 0;
 }
 
@@ -731,19 +732,21 @@ onMounted(() => {
 
 .form-label {
   font-size: 14px;
-  color: #555555;
+  color: var(--text-secondary);
 }
 
 .form-input {
   padding: 8px 10px;
   border-radius: 4px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   font-size: 14px;
   outline: none;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
 }
 
 .form-input:focus {
-  border-color: #0969da;
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
 }
 
@@ -757,18 +760,18 @@ onMounted(() => {
   padding: 10px 14px;
   border-radius: 6px;
   font-size: 13px;
-  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
+  box-shadow: var(--shadow-card);
   z-index: 1000;
 }
 
 .toast-success {
-  background-color: #1a7f37;
-  color: #ffffff;
+  background-color: var(--color-success);
+  color: var(--text-inverse);
 }
 
 .toast-error {
-  background-color: #d1242f;
-  color: #ffffff;
+  background-color: var(--color-danger);
+  color: var(--text-inverse);
 }
 
 .switch {
@@ -792,7 +795,7 @@ onMounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #d0d7de;
+  background-color: var(--border-color);
   transition: 0.2s;
   border-radius: 999px;
 }
@@ -811,7 +814,7 @@ onMounted(() => {
 }
 
 .switch input:checked + .slider {
-  background-color: #0969da;
+  background-color: var(--primary-color);
 }
 
 .switch input:checked + .slider::before {
@@ -828,21 +831,21 @@ onMounted(() => {
   padding: 8px 14px;
   border-radius: 4px;
   border: none;
-  background-color: #0969da;
-  color: #ffffff;
+  background-color: var(--primary-color);
+  color: var(--text-inverse);
   font-size: 14px;
   cursor: pointer;
   min-width: 100px;
 }
 
 .card-button.secondary {
-  background-color: #f6f8fa;
-  color: #24292f;
-  border: 1px solid #d0d7de;
+  background-color: var(--bg-sider);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
 }
 .card-button.secondary:hover {
-  background-color: #f3f4f6;
-  border-color: #d0d7de;
+  background-color: var(--bg-hover);
+  border-color: var(--border-color);
 }
 
 .card-button:disabled {
@@ -856,11 +859,11 @@ onMounted(() => {
 }
 
 .form-message-success {
-  color: #1a7f37;
+  color: var(--color-success);
 }
 
 .form-message-error {
-  color: #d1242f;
+  color: var(--color-danger);
 }
 
 .loading-container {
@@ -875,15 +878,15 @@ onMounted(() => {
 .loading-spinner {
   width: 32px;
   height: 32px;
-  border: 3px solid #f0f0f0;
-  border-top-color: #0969da;
+  border: 3px solid var(--bg-hover);
+  border-top-color: var(--primary-color);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
 
 .loading-text {
   font-size: 14px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 @keyframes spin {
@@ -896,16 +899,16 @@ onMounted(() => {
 }
 .page-hint {
   font-size: 14px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 .form-hint {
   font-size: 12px;
-  color: #57606a;
+  color: var(--text-secondary);
   margin-top: 4px;
   line-height: 1.5;
 }
 .form-hint a {
-  color: #0969da;
+  color: var(--primary-color);
   text-decoration: none;
 }
 .form-hint a:hover {
diff --git a/cwd-admin/src/views/StatsView.vue b/cwd-admin/src/views/StatsView.vue
index 48701a0..46cb6e5 100644
--- a/cwd-admin/src/views/StatsView.vue
+++ b/cwd-admin/src/views/StatsView.vue
@@ -272,7 +272,7 @@ onBeforeUnmount(() => {
 .page-title {
   margin: 0;
   font-size: 18px;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .toolbar {
@@ -292,21 +292,23 @@ onBeforeUnmount(() => {
   padding: 8px 8px;
   box-sizing: border-box;
   font-size: 13px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  background-color: #ffffff;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
 }
 
 .card {
-  background-color: #ffffff;
+  background-color: var(--bg-card);
   border-radius: 6px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   padding: 16px 18px;
 }
 
 .card-title {
   margin: 0 0 12px;
   font-size: 16px;
+  color: var(--text-primary);
 }
 
 .card-title-row {
@@ -319,18 +321,18 @@ onBeforeUnmount(() => {
 
 .page-hint {
   font-size: 14px;
-  color: #57606a;
+  color: var(--text-secondary);
 }
 
 .page-error {
   font-size: 14px;
-  color: #d1242f;
+  color: var(--color-danger);
 }
 
 .chart-tabs {
   display: inline-flex;
   border-radius: 999px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   overflow: hidden;
 }
 
@@ -338,18 +340,18 @@ onBeforeUnmount(() => {
   padding: 4px 10px;
   font-size: 12px;
   border: none;
-  background-color: #ffffff;
-  color: #57606a;
+  background-color: var(--bg-card);
+  color: var(--text-secondary);
   cursor: pointer;
 }
 
 .chart-tab + .chart-tab {
-  border-left: 1px solid #d0d7de;
+  border-left: 1px solid var(--border-color);
 }
 
 .chart-tab-active {
-  background-color: #0969da;
-  color: #ffffff;
+  background-color: var(--primary-color);
+  color: var(--text-inverse);
 }
 
 .stats-grid {
@@ -361,32 +363,32 @@ onBeforeUnmount(() => {
 .stats-item {
   padding: 10px 12px;
   border-radius: 6px;
-  background-color: #f6f8fa;
-  border: 1px solid #d0d7de;
+  background-color: var(--bg-sider);
+  border: 1px solid var(--border-color);
 }
 
 .stats-label {
   font-size: 14px;
-  color: #57606a;
+  color: var(--text-secondary);
   margin-bottom: 4px;
 }
 
 .stats-value {
   font-size: 30px;
   font-weight: 600;
-  color: #24292f;
+  color: var(--text-primary);
 }
 
 .stats-value-approved {
-  color: #1a7f37;
+  color: var(--color-success);
 }
 
 .stats-value-pending {
-  color: #9a6700;
+  color: var(--color-warning);
 }
 
 .stats-value-rejected {
-  color: #d1242f;
+  color: var(--color-danger);
 }
 
 .domain-table-wrapper {
@@ -396,7 +398,7 @@ onBeforeUnmount(() => {
 }
 
 .domain-table {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   min-width: 520px;
   overflow: hidden;
@@ -404,19 +406,20 @@ onBeforeUnmount(() => {
 
 .domain-table-header {
   display: flex;
-  background-color: #f6f8fa;
+  background-color: var(--bg-sider);
+  color: var(--text-secondary);
 }
 
 .domain-table-row {
   display: flex;
-  border-top: 1px solid #eaeae0;
+  border-top: 1px solid var(--border-color);
 }
 
 .domain-cell {
   flex: 1;
   padding: 10px 10px;
   font-size: 14px;
-  color: #24292f;
+  color: var(--text-primary);
   box-sizing: border-box;
 }
 
@@ -444,18 +447,18 @@ onBeforeUnmount(() => {
   padding: 10px 14px;
   border-radius: 6px;
   font-size: 13px;
-  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
+  box-shadow: var(--shadow-card);
   z-index: 1000;
 }
 
 .toast-success {
-  background-color: #1a7f37;
-  color: #ffffff;
+  background-color: var(--color-success);
+  color: var(--text-inverse);
 }
 
 .toast-error {
-  background-color: #d1242f;
-  color: #ffffff;
+  background-color: var(--color-danger);
+  color: var(--text-inverse);
 }
 
 @media (max-width: 768px) {