From 8927681b6e52a4554fa48e62d4c0e2653ecd8d85 Mon Sep 17 00:00:00 2001
From: ViperEkura <3081035982@qq.com>
Date: Tue, 24 Mar 2026 16:42:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=A4=9C=E9=97=B4?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                      | 78 ++++++++++++++++++++-
 frontend/src/components/ChatView.vue      | 83 +++++++++++++++--------
 frontend/src/components/MessageBubble.vue | 44 ++++++------
 frontend/src/components/MessageInput.vue  | 27 ++++----
 frontend/src/components/SettingsPanel.vue | 81 ++++++++++++++--------
 frontend/src/components/Sidebar.vue       | 33 ++++-----
 frontend/src/composables/useTheme.js      | 32 +++++++++
 7 files changed, 266 insertions(+), 112 deletions(-)
 create mode 100644 frontend/src/composables/useTheme.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a4d7661..6607e53 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -258,6 +258,79 @@ onMounted(() => {
 </script>
 
 <style>
+:root {
+  /* Light theme */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f0f4f8;
+  --bg-hover: rgba(37, 99, 235, 0.06);
+  --bg-active: rgba(37, 99, 235, 0.12);
+  --bg-input: #f8fafc;
+  --bg-code: #f1f5f9;
+  --bg-thinking: #f1f5f9;
+
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --text-tertiary: #94a3b8;
+
+  --border-light: rgba(0, 0, 0, 0.06);
+  --border-medium: rgba(0, 0, 0, 0.08);
+  --border-input: rgba(0, 0, 0, 0.08);
+
+  --accent-primary: #2563eb;
+  --accent-primary-hover: #3b82f6;
+  --accent-primary-light: rgba(37, 99, 235, 0.08);
+  --accent-primary-medium: rgba(37, 99, 235, 0.15);
+
+  --success-color: #059669;
+  --success-bg: rgba(16, 185, 129, 0.1);
+  --danger-color: #ef4444;
+  --danger-bg: rgba(239, 68, 68, 0.08);
+
+  --scrollbar-thumb: rgba(0, 0, 0, 0.08);
+  --scrollbar-thumb-sidebar: rgba(0, 0, 0, 0.1);
+
+  --overlay-bg: rgba(0, 0, 0, 0.3);
+
+  --avatar-gradient: linear-gradient(135deg, #3b82f6, #60a5fa);
+}
+
+[data-theme="dark"] {
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #0f172a;
+  --bg-hover: rgba(59, 130, 246, 0.15);
+  --bg-active: rgba(59, 130, 246, 0.25);
+  --bg-input: #1e293b;
+  --bg-code: #1e293b;
+  --bg-thinking: #1e293b;
+
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-tertiary: #64748b;
+
+  --border-light: rgba(255, 255, 255, 0.08);
+  --border-medium: rgba(255, 255, 255, 0.1);
+  --border-input: rgba(255, 255, 255, 0.1);
+
+  --accent-primary: #3b82f6;
+  --accent-primary-hover: #60a5fa;
+  --accent-primary-light: rgba(59, 130, 246, 0.15);
+  --accent-primary-medium: rgba(59, 130, 246, 0.25);
+
+  --success-color: #34d399;
+  --success-bg: rgba(52, 211, 153, 0.15);
+  --danger-color: #f87171;
+  --danger-bg: rgba(248, 113, 113, 0.15);
+
+  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
+  --scrollbar-thumb-sidebar: rgba(255, 255, 255, 0.15);
+
+  --overlay-bg: rgba(0, 0, 0, 0.6);
+
+  --avatar-gradient: linear-gradient(135deg, #3b82f6, #60a5fa);
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -271,9 +344,10 @@ html, body {
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
-  background: #f0f4f8;
-  color: #1e293b;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
   -webkit-font-smoothing: antialiased;
+  transition: background 0.2s, color 0.2s;
 }
 
 #app {
diff --git a/frontend/src/components/ChatView.vue b/frontend/src/components/ChatView.vue
index c29038d..e10a5e9 100644
--- a/frontend/src/components/ChatView.vue
+++ b/frontend/src/components/ChatView.vue
@@ -128,8 +128,9 @@ defineExpose({ scrollToBottom })
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #f8fafc;
+  background: var(--bg-secondary);
   min-width: 0;
+  transition: background 0.2s;
 }
 
 .welcome {
@@ -138,7 +139,7 @@ defineExpose({ scrollToBottom })
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #94a3b8;
+  color: var(--text-tertiary);
 }
 
 .welcome-icon {
@@ -155,7 +156,7 @@ defineExpose({ scrollToBottom })
 
 .welcome h1 {
   font-size: 24px;
-  color: #1e293b;
+  color: var(--text-primary);
   margin: 0 0 8px;
 }
 
@@ -168,9 +169,10 @@ defineExpose({ scrollToBottom })
   align-items: center;
   justify-content: space-between;
   padding: 12px 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  background: rgba(255, 255, 255, 0.85);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-primary);
   backdrop-filter: blur(8px);
+  transition: background 0.2s, border-color 0.2s;
 }
 
 .chat-title-area {
@@ -183,7 +185,7 @@ defineExpose({ scrollToBottom })
 .chat-title {
   font-size: 16px;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--text-primary);
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
@@ -194,8 +196,8 @@ defineExpose({ scrollToBottom })
   font-size: 11px;
   padding: 2px 8px;
   border-radius: 10px;
-  background: rgba(37, 99, 235, 0.1);
-  color: #2563eb;
+  background: var(--accent-primary-light);
+  color: var(--accent-primary);
   flex-shrink: 0;
 }
 
@@ -203,8 +205,8 @@ defineExpose({ scrollToBottom })
   font-size: 11px;
   padding: 2px 8px;
   border-radius: 10px;
-  background: rgba(16, 185, 129, 0.1);
-  color: #059669;
+  background: var(--success-bg);
+  color: var(--success-color);
   flex-shrink: 0;
 }
 
@@ -219,7 +221,7 @@ defineExpose({ scrollToBottom })
   border-radius: 8px;
   border: none;
   background: none;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -228,8 +230,8 @@ defineExpose({ scrollToBottom })
 }
 
 .btn-icon:hover {
-  background: rgba(37, 99, 235, 0.08);
-  color: #2563eb;
+  background: var(--bg-hover);
+  color: var(--accent-primary);
 }
 
 .messages-container {
@@ -243,7 +245,7 @@ defineExpose({ scrollToBottom })
 }
 
 .messages-container::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.08);
+  background: var(--scrollbar-thumb);
   border-radius: 3px;
 }
 
@@ -254,8 +256,8 @@ defineExpose({ scrollToBottom })
 
 .load-more-top button {
   background: none;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  color: #64748b;
+  border: 1px solid var(--border-medium);
+  color: var(--text-secondary);
   padding: 6px 16px;
   border-radius: 16px;
   cursor: pointer;
@@ -264,8 +266,8 @@ defineExpose({ scrollToBottom })
 }
 
 .load-more-top button:hover {
-  background: rgba(37, 99, 235, 0.06);
-  color: #2563eb;
+  background: var(--bg-hover);
+  color: var(--accent-primary);
 }
 
 .messages-list {
@@ -273,22 +275,43 @@ defineExpose({ scrollToBottom })
   margin: 0 auto;
 }
 
+.message-bubble {
+  display: flex;
+  gap: 12px;
+  padding: 16px 0;
+}
+
+.message-bubble .avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: -0.3px;
+  flex-shrink: 0;
+  background: var(--avatar-gradient);
+  color: white;
+}
+
 .streaming-thinking {
   font-size: 13px;
-  color: #64748b;
+  color: var(--text-secondary);
   line-height: 1.6;
   white-space: pre-wrap;
   padding: 12px;
-  background: #f1f5f9;
+  background: var(--bg-thinking);
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--border-light);
   margin-bottom: 8px;
 }
 
 .streaming-content {
   font-size: 15px;
   line-height: 1.7;
-  color: #1e293b;
+  color: var(--text-primary);
   word-break: break-word;
 }
 
@@ -301,8 +324,8 @@ defineExpose({ scrollToBottom })
 }
 
 .streaming-content :deep(pre) {
-  background: #f1f5f9;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--bg-code);
+  border: 1px solid var(--border-light);
   border-radius: 8px;
   padding: 16px;
   overflow-x: auto;
@@ -316,8 +339,8 @@ defineExpose({ scrollToBottom })
 }
 
 .streaming-content :deep(code) {
-  background: rgba(37, 99, 235, 0.08);
-  color: #2563eb;
+  background: var(--accent-primary-light);
+  color: var(--accent-primary);
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 13px;
@@ -339,7 +362,7 @@ defineExpose({ scrollToBottom })
 .streaming-content :deep(blockquote) {
   border-left: 3px solid rgba(59, 130, 246, 0.4);
   padding-left: 12px;
-  color: #64748b;
+  color: var(--text-secondary);
   margin: 8px 0;
 }
 
@@ -351,17 +374,17 @@ defineExpose({ scrollToBottom })
 
 .streaming-content :deep(th),
 .streaming-content :deep(td) {
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--border-medium);
   padding: 8px 12px;
   text-align: left;
 }
 
 .streaming-content :deep(th) {
-  background: #f1f5f9;
+  background: var(--bg-code);
 }
 
 .streaming-content :deep(.placeholder) {
-  color: #94a3b8;
+  color: var(--text-tertiary);
 }
 
 .streaming-content :deep(.math-block),
diff --git a/frontend/src/components/MessageBubble.vue b/frontend/src/components/MessageBubble.vue
index 70d451d..4ebeb44 100644
--- a/frontend/src/components/MessageBubble.vue
+++ b/frontend/src/components/MessageBubble.vue
@@ -100,7 +100,7 @@ function copyContent() {
 }
 
 .assistant .avatar {
-  background: linear-gradient(135deg, #3b82f6, #60a5fa);
+  background: var(--avatar-gradient);
   color: white;
   font-size: 8px;
   font-weight: 700;
@@ -115,16 +115,16 @@ function copyContent() {
 .thinking-block {
   margin-bottom: 8px;
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--border-light);
   overflow: hidden;
 }
 
 .thinking-toggle {
   width: 100%;
   padding: 8px 12px;
-  background: #f8fafc;
+  background: var(--bg-secondary);
   border: none;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 13px;
   cursor: pointer;
   display: flex;
@@ -134,7 +134,7 @@ function copyContent() {
 }
 
 .thinking-toggle:hover {
-  background: #f1f5f9;
+  background: var(--bg-code);
 }
 
 .thinking-toggle .arrow {
@@ -149,10 +149,10 @@ function copyContent() {
 .thinking-content {
   padding: 12px;
   font-size: 13px;
-  color: #64748b;
+  color: var(--text-secondary);
   line-height: 1.6;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-  background: #f8fafc;
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
   white-space: pre-wrap;
   max-height: 300px;
   overflow-y: auto;
@@ -161,7 +161,7 @@ function copyContent() {
 .message-content {
   font-size: 15px;
   line-height: 1.7;
-  color: #1e293b;
+  color: var(--text-primary);
   word-break: break-word;
 }
 
@@ -174,8 +174,8 @@ function copyContent() {
 }
 
 .message-content :deep(pre) {
-  background: #f1f5f9;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--bg-code);
+  border: 1px solid var(--border-light);
   border-radius: 8px;
   padding: 16px;
   overflow-x: auto;
@@ -190,8 +190,8 @@ function copyContent() {
 }
 
 .message-content :deep(code) {
-  background: rgba(37, 99, 235, 0.08);
-  color: #2563eb;
+  background: var(--accent-primary-light);
+  color: var(--accent-primary);
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 13px;
@@ -213,7 +213,7 @@ function copyContent() {
 .message-content :deep(blockquote) {
   border-left: 3px solid rgba(59, 130, 246, 0.4);
   padding-left: 12px;
-  color: #64748b;
+  color: var(--text-secondary);
   margin: 8px 0;
 }
 
@@ -225,13 +225,13 @@ function copyContent() {
 
 .message-content :deep(th),
 .message-content :deep(td) {
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--border-medium);
   padding: 8px 12px;
   text-align: left;
 }
 
 .message-content :deep(th) {
-  background: #f1f5f9;
+  background: var(--bg-code);
 }
 
 .message-footer {
@@ -250,14 +250,14 @@ function copyContent() {
 .token-count,
 .message-time {
   font-size: 12px;
-  color: #94a3b8;
+  color: var(--text-tertiary);
 }
 
 .btn-copy,
 .btn-delete-msg {
   background: none;
   border: none;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
@@ -267,13 +267,13 @@ function copyContent() {
 }
 
 .btn-copy:hover {
-  color: #2563eb;
-  background: rgba(37, 99, 235, 0.08);
+  color: var(--accent-primary);
+  background: var(--accent-primary-light);
 }
 
 .btn-delete-msg:hover {
-  color: #ef4444;
-  background: rgba(239, 68, 68, 0.08);
+  color: var(--danger-color);
+  background: var(--danger-bg);
 }
 
 .message-content :deep(.math-block) {
diff --git a/frontend/src/components/MessageInput.vue b/frontend/src/components/MessageInput.vue
index 22d945e..86065b3 100644
--- a/frontend/src/components/MessageInput.vue
+++ b/frontend/src/components/MessageInput.vue
@@ -73,29 +73,30 @@ defineExpose({ focus })
 <style scoped>
 .message-input {
   padding: 16px 24px 12px;
-  background: #ffffff;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--bg-primary);
+  border-top: 1px solid var(--border-light);
+  transition: background 0.2s, border-color 0.2s;
 }
 
 .input-wrapper {
   display: flex;
   align-items: center;
-  background: #f8fafc;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: var(--bg-input);
+  border: 1px solid var(--border-input);
   border-radius: 12px;
   padding: 8px 12px;
-  transition: border-color 0.2s;
+  transition: border-color 0.2s, background 0.2s;
 }
 
 .input-wrapper:focus-within {
-  border-color: rgba(37, 99, 235, 0.5);
+  border-color: var(--accent-primary);
 }
 
 textarea {
   flex: 1;
   background: none;
   border: none;
-  color: #1e293b;
+  color: var(--text-primary);
   font-size: 15px;
   line-height: 1.5;
   resize: none;
@@ -105,7 +106,7 @@ textarea {
 }
 
 textarea::placeholder {
-  color: #94a3b8;
+  color: var(--text-tertiary);
 }
 
 textarea:disabled {
@@ -124,8 +125,8 @@ textarea:disabled {
   height: 36px;
   border-radius: 8px;
   border: none;
-  background: #e2e8f0;
-  color: #94a3b8;
+  background: var(--bg-code);
+  color: var(--text-tertiary);
   cursor: not-allowed;
   display: flex;
   align-items: center;
@@ -134,19 +135,19 @@ textarea:disabled {
 }
 
 .btn-send.active {
-  background: #2563eb;
+  background: var(--accent-primary);
   color: white;
   cursor: pointer;
 }
 
 .btn-send.active:hover {
-  background: #3b82f6;
+  background: var(--accent-primary-hover);
 }
 
 .input-hint {
   text-align: center;
   font-size: 12px;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   margin-top: 8px;
 }
 </style>
diff --git a/frontend/src/components/SettingsPanel.vue b/frontend/src/components/SettingsPanel.vue
index 49841ca..1f8c845 100644
--- a/frontend/src/components/SettingsPanel.vue
+++ b/frontend/src/components/SettingsPanel.vue
@@ -82,6 +82,19 @@
               <span class="toggle-thumb"></span>
             </button>
           </div>
+
+          <div class="settings-divider"></div>
+
+          <div class="form-group toggle-group">
+            <label>夜间模式</label>
+            <button
+              class="toggle"
+              :class="{ on: isDark }"
+              @click="toggleTheme"
+            >
+              <span class="toggle-thumb"></span>
+            </button>
+          </div>
         </div>
 
         <div class="settings-footer">
@@ -96,6 +109,7 @@
 <script setup>
 import { reactive, ref, watch, onMounted } from 'vue'
 import { modelApi } from '../api'
+import { useTheme } from '../composables/useTheme'
 
 const props = defineProps({
   visible: { type: Boolean, default: false },
@@ -104,6 +118,7 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'save'])
 
+const { isDark, toggleTheme } = useTheme()
 const models = ref([])
 
 const form = reactive({
@@ -147,20 +162,22 @@ function save() {
 .settings-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--overlay-bg);
   z-index: 100;
   display: flex;
   justify-content: flex-end;
+  transition: background 0.2s;
 }
 
 .settings-panel {
   width: 380px;
   height: 100vh;
-  background: #ffffff;
-  border-left: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--bg-primary);
+  border-left: 1px solid var(--border-light);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  transition: background 0.2s, border-color 0.2s;
 }
 
 .settings-header {
@@ -168,19 +185,19 @@ function save() {
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--border-light);
 }
 
 .settings-header h3 {
   margin: 0;
   font-size: 16px;
-  color: #1e293b;
+  color: var(--text-primary);
 }
 
 .btn-close {
   background: none;
   border: none;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
@@ -188,8 +205,8 @@ function save() {
 }
 
 .btn-close:hover {
-  color: #1e293b;
-  background: rgba(37, 99, 235, 0.08);
+  color: var(--text-primary);
+  background: var(--bg-hover);
 }
 
 .settings-body {
@@ -204,14 +221,14 @@ function save() {
 .form-group label {
   display: block;
   font-size: 13px;
-  color: #64748b;
+  color: var(--text-secondary);
   margin-bottom: 8px;
   font-weight: 500;
 }
 
 .value-display {
   float: right;
-  color: #2563eb;
+  color: var(--accent-primary);
   font-weight: 600;
 }
 
@@ -220,21 +237,21 @@ function save() {
 .form-group select {
   width: 100%;
   padding: 10px 12px;
-  background: #f8fafc;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: var(--bg-input);
+  border: 1px solid var(--border-input);
   border-radius: 8px;
-  color: #1e293b;
+  color: var(--text-primary);
   font-size: 14px;
   font-family: inherit;
   outline: none;
-  transition: border-color 0.2s;
+  transition: border-color 0.2s, background 0.2s;
   box-sizing: border-box;
 }
 
 .form-group input[type="text"]:focus,
 .form-group textarea:focus,
 .form-group select:focus {
-  border-color: rgba(37, 99, 235, 0.5);
+  border-color: var(--accent-primary);
 }
 
 .form-group textarea {
@@ -247,7 +264,7 @@ function save() {
 }
 
 .form-group select option {
-  background: #ffffff;
+  background: var(--bg-primary);
 }
 
 .form-row {
@@ -264,7 +281,7 @@ function save() {
   height: 4px;
   -webkit-appearance: none;
   appearance: none;
-  background: #e2e8f0;
+  background: var(--bg-code);
   border-radius: 2px;
   outline: none;
 }
@@ -275,16 +292,16 @@ function save() {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--accent-primary);
   cursor: pointer;
-  border: 2px solid #ffffff;
+  border: 2px solid var(--bg-primary);
 }
 
 .range-labels {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   margin-top: 4px;
 }
 
@@ -303,7 +320,7 @@ function save() {
   height: 24px;
   border-radius: 12px;
   border: none;
-  background: #e2e8f0;
+  background: var(--bg-code);
   cursor: pointer;
   position: relative;
   transition: background 0.2s;
@@ -311,7 +328,7 @@ function save() {
 }
 
 .toggle.on {
-  background: #2563eb;
+  background: var(--accent-primary);
 }
 
 .toggle-thumb {
@@ -330,9 +347,15 @@ function save() {
   transform: translateX(20px);
 }
 
+.settings-divider {
+  height: 1px;
+  background: var(--border-light);
+  margin: 24px 0;
+}
+
 .settings-footer {
   padding: 16px 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  border-top: 1px solid var(--border-light);
   display: flex;
   justify-content: flex-end;
   gap: 8px;
@@ -341,24 +364,24 @@ function save() {
 .btn-cancel {
   padding: 8px 20px;
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--border-medium);
   background: none;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.15s;
 }
 
 .btn-cancel:hover {
-  background: rgba(37, 99, 235, 0.06);
-  color: #1e293b;
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
 .btn-save {
   padding: 8px 20px;
   border-radius: 8px;
   border: none;
-  background: #2563eb;
+  background: var(--accent-primary);
   color: white;
   font-size: 14px;
   cursor: pointer;
@@ -366,7 +389,7 @@ function save() {
 }
 
 .btn-save:hover {
-  background: #3b82f6;
+  background: var(--accent-primary-hover);
 }
 
 .slide-enter-active,
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 3b50e4b..2cd43ab 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -75,11 +75,12 @@ function onContextMenu(e, conv) {
 .sidebar {
   width: 280px;
   min-width: 280px;
-  background: #ffffff;
-  border-right: 1px solid rgba(0, 0, 0, 0.08);
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border-medium);
   display: flex;
   flex-direction: column;
   height: 100vh;
+  transition: background 0.2s, border-color 0.2s;
 }
 
 .sidebar-header {
@@ -89,10 +90,10 @@ function onContextMenu(e, conv) {
 .btn-new {
   width: 100%;
   padding: 10px 16px;
-  background: rgba(37, 99, 235, 0.08);
-  border: 1px dashed rgba(37, 99, 235, 0.35);
+  background: var(--accent-primary-light);
+  border: 1px dashed var(--accent-primary);
   border-radius: 10px;
-  color: #2563eb;
+  color: var(--accent-primary);
   font-size: 14px;
   cursor: pointer;
   display: flex;
@@ -102,8 +103,8 @@ function onContextMenu(e, conv) {
 }
 
 .btn-new:hover {
-  background: rgba(37, 99, 235, 0.15);
-  border-color: rgba(37, 99, 235, 0.5);
+  background: var(--accent-primary-medium);
+  border-color: var(--accent-primary);
 }
 
 .btn-new .icon {
@@ -122,7 +123,7 @@ function onContextMenu(e, conv) {
 }
 
 .conversation-list::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--scrollbar-thumb-sidebar);
   border-radius: 2px;
 }
 
@@ -137,11 +138,11 @@ function onContextMenu(e, conv) {
 }
 
 .conversation-item:hover {
-  background: rgba(37, 99, 235, 0.06);
+  background: var(--bg-hover);
 }
 
 .conversation-item.active {
-  background: rgba(37, 99, 235, 0.12);
+  background: var(--bg-active);
 }
 
 .conv-info {
@@ -151,7 +152,7 @@ function onContextMenu(e, conv) {
 
 .conv-title {
   font-size: 14px;
-  color: #1e293b;
+  color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -159,7 +160,7 @@ function onContextMenu(e, conv) {
 
 .conv-meta {
   font-size: 12px;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   margin-top: 2px;
 }
 
@@ -167,7 +168,7 @@ function onContextMenu(e, conv) {
   opacity: 0;
   background: none;
   border: none;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
@@ -180,14 +181,14 @@ function onContextMenu(e, conv) {
 }
 
 .btn-delete:hover {
-  color: #ef4444;
-  background: rgba(239, 68, 68, 0.08);
+  color: var(--danger-color);
+  background: var(--danger-bg);
 }
 
 .loading-more,
 .empty-hint {
   text-align: center;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   font-size: 13px;
   padding: 20px;
 }
diff --git a/frontend/src/composables/useTheme.js b/frontend/src/composables/useTheme.js
new file mode 100644
index 0000000..e6d7668
--- /dev/null
+++ b/frontend/src/composables/useTheme.js
@@ -0,0 +1,32 @@
+import { ref, watch } from 'vue'
+
+const isDark = ref(false)
+
+// 初始化时从 localStorage 读取
+if (typeof window !== 'undefined') {
+  const saved = localStorage.getItem('theme')
+  isDark.value = saved === 'dark'
+  applyTheme()
+}
+
+function applyTheme() {
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light')
+  }
+}
+
+export function useTheme() {
+  watch(isDark, (val) => {
+    localStorage.setItem('theme', val ? 'dark' : 'light')
+    applyTheme()
+  })
+
+  function toggleTheme() {
+    isDark.value = !isDark.value
+  }
+
+  return {
+    isDark,
+    toggleTheme,
+  }
+}