feat(admin): 添加深色主题支持

- 新增主题切换功能，支持浅色、深色和跟随系统三种模式 - 创建主题管理组合式函数 useTheme 和 CSS 变量定义 - 在所有视图组件中应用 CSS 变量以实现主题适配 - 在布局头部添加主题切换按钮，支持循环切换主题 - 更新 .gitignore 添加 .trae 文件忽略
2026-01-27 11:07:13 +08:00
parent 61f2223825
commit ba8349b04c
12 changed files with 411 additions and 220 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -172,3 +172,4 @@ package-lock.json
 wrangler.jsonc

 .claude
+.trae
--- 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>
--- a/cwd-admin/src/assets/theme.css
+++ 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);
+}
--- a/cwd-admin/src/composables/useTheme.ts
+++ 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
+  };
+}
--- 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';

--- 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) {
--- 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);
 }

--- 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>
--- 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>
--- 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;
--- 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 {
--- 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) {