From 5584a46ca2117e1cc6bd35b41d0372bc99e8e1f6 Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Thu, 20 Nov 2025 00:39:00 +0800
Subject: [PATCH] :recycle: Refactor theme module

---
 frontend/src/assets/styles/index.css          |   6 +-
 frontend/src/assets/styles/variables.css      | 385 +++++++-----------
 .../src/components/loading/LoadingScreen.vue  |   4 +-
 frontend/src/stores/themeStore.ts             |  12 +-
 .../editor/basic/contentChangeExtension.ts    |  44 +-
 frontend/src/views/editor/theme/base.ts       | 279 ++++++-------
 frontend/src/views/editor/theme/dark/aura.ts  | 136 +++++--
 .../views/editor/theme/dark/default-dark.ts   | 156 ++++---
 .../src/views/editor/theme/dark/dracula.ts    | 166 +++++---
 .../views/editor/theme/dark/github-dark.ts    | 142 +++++--
 .../views/editor/theme/dark/material-dark.ts  | 160 +++++---
 .../src/views/editor/theme/dark/one-dark.ts   | 172 +++++---
 .../views/editor/theme/dark/solarized-dark.ts | 154 ++++---
 .../editor/theme/dark/tokyo-night-storm.ts    | 136 +++++--
 .../views/editor/theme/dark/tokyo-night.ts    | 136 +++++--
 .../views/editor/theme/light/default-light.ts | 155 ++++---
 .../views/editor/theme/light/github-light.ts  | 140 +++++--
 .../editor/theme/light/material-light.ts      | 166 +++++---
 .../editor/theme/light/solarized-light.ts     | 166 +++++---
 .../editor/theme/light/tokyo-night-day.ts     | 136 +++++--
 frontend/src/views/editor/theme/types.ts      | 250 +++++++++---
 21 files changed, 1975 insertions(+), 1126 deletions(-)

diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index bf2cad9..7dc7327 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -1,8 +1,8 @@
 /* 导入所有CSS文件 */
 @import 'normalize.css';
-@import 'variables.css';
-@import 'scrollbar.css';
 @import "harmony_fonts.css";
 @import 'hack_fonts.css';
 @import 'opensans_fonts.css';
-@import "monocraft_fonts.css";
\ No newline at end of file
+@import "monocraft_fonts.css";
+@import 'variables.css';
+@import 'scrollbar.css';
\ No newline at end of file
diff --git a/frontend/src/assets/styles/variables.css b/frontend/src/assets/styles/variables.css
index eb7d3a0..eddcea4 100644
--- a/frontend/src/assets/styles/variables.css
+++ b/frontend/src/assets/styles/variables.css
@@ -1,255 +1,148 @@
 :root {
-  /* 编辑器区域 */
-  --text-primary: #9BB586; /* 内容区域字体颜色 */
-  
-  /* 深色主题颜色变量 */
-  --dark-toolbar-bg: #2d2d2d;
-  --dark-toolbar-border: #404040;
-  --dark-toolbar-text: #ffffff;
-  --dark-toolbar-text-secondary: #cccccc;
-  --dark-toolbar-button-hover: #404040;
-  --dark-tab-active-line: linear-gradient(90deg, #007acc 0%, #0099ff 100%);
-  --dark-bg-secondary: #0E1217;
-  --dark-text-secondary: #a0aec0;
-  --dark-text-muted: #666;
-  --dark-border-color: #2d3748;
-  --dark-settings-bg: #2a2a2a;
-  --dark-settings-card-bg: #333333;
-  --dark-settings-text: #ffffff;
-  --dark-settings-text-secondary: #cccccc;
-  --dark-settings-border: #444444;
-  --dark-settings-input-bg: #3a3a3a;
-  --dark-settings-input-border: #555555;
-  --dark-settings-hover: #404040;
-  --dark-scrollbar-track: #2a2a2a;
-  --dark-scrollbar-thumb: #555555;
-  --dark-scrollbar-thumb-hover: #666666;
-  --dark-selection-bg: rgba(181, 206, 168, 0.1);
-  --dark-selection-text: #b5cea8;
-  --dark-danger-color: #ff6b6b;
-  --dark-bg-primary: #1a1a1a;
-  --dark-bg-hover: #2a2a2a;
-  --dark-loading-bg-gradient: radial-gradient(#222922, #000500);
-  --dark-loading-color: #fff;
-  --dark-loading-glow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
-  --dark-loading-done-color: #6f6;
-  --dark-loading-overlay: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
-  
-  /* 浅色主题颜色变量 */
-  --light-toolbar-bg: #f8f9fa;
-  --light-toolbar-border: #e9ecef;
-  --light-toolbar-text: #212529;
-  --light-toolbar-text-secondary: #495057;
-  --light-toolbar-button-hover: #e9ecef;
-  --light-tab-active-line: linear-gradient(90deg, #0066cc 0%, #0088ff 100%);
-  --light-bg-secondary: #f7fef7;
-  --light-text-secondary: #374151;
-  --light-text-muted: #6b7280;
-  --light-border-color: #e5e7eb;
-  --light-settings-bg: #ffffff;
-  --light-settings-card-bg: #f8f9fa;
-  --light-settings-text: #212529;
-  --light-settings-text-secondary: #6c757d;
-  --light-settings-border: #dee2e6;
-  --light-settings-input-bg: #ffffff;
-  --light-settings-input-border: #ced4da;
-  --light-settings-hover: #e9ecef;
-  --light-scrollbar-track: #f1f3f4;
-  --light-scrollbar-thumb: #c1c1c1;
-  --light-scrollbar-thumb-hover: #a8a8a8;
-  --light-selection-bg: rgba(59, 130, 246, 0.15);
-  --light-selection-text: #2563eb;
-  --light-danger-color: #dc3545;
-  --light-bg-primary: #ffffff;
-  --light-bg-hover: #f1f3f4;
-  --light-loading-bg-gradient: radial-gradient(#f0f6f0, #e5efe5);
-  --light-loading-color: #1a3c1a;
-  --light-loading-glow: 0 0 10px rgba(0, 160, 0, 0.3), 0 0 5px rgba(0, 120, 0, 0.2);
-  --light-loading-done-color: #008800;
-  --light-loading-overlay: linear-gradient(transparent 0%, rgba(220, 240, 220, 0.5) 50%);
-  
-  /* 默认使用深色主题 */
-  --toolbar-bg: var(--dark-toolbar-bg);
-  --toolbar-border: var(--dark-toolbar-border);
-  --toolbar-text: var(--dark-toolbar-text);
-  --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
-  --toolbar-button-hover: var(--dark-toolbar-button-hover);
-  --toolbar-separator: var(--dark-toolbar-button-hover);
-  --tab-active-line: var(--dark-tab-active-line);
-  --bg-secondary: var(--dark-bg-secondary);
-  --text-secondary: var(--dark-text-secondary);
-  --text-muted: var(--dark-text-muted);
-  --border-color: var(--dark-border-color);
-  --settings-bg: var(--dark-settings-bg);
-  --settings-card-bg: var(--dark-settings-card-bg);
-  --settings-text: var(--dark-settings-text);
-  --settings-text-secondary: var(--dark-settings-text-secondary);
-  --settings-border: var(--dark-settings-border);
-  --settings-input-bg: var(--dark-settings-input-bg);
-  --settings-input-border: var(--dark-settings-input-border);
-  --settings-hover: var(--dark-settings-hover);
-  --scrollbar-track: var(--dark-scrollbar-track);
-  --scrollbar-thumb: var(--dark-scrollbar-thumb);
-  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
-  --selection-bg: var(--dark-selection-bg);
-  --selection-text: var(--dark-selection-text);
-  --text-danger: var(--dark-danger-color);
-  --bg-primary: var(--dark-bg-primary);
-  --bg-hover: var(--dark-bg-hover);
-  --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
-  --voidraft-loading-color: var(--dark-loading-color);
-  --voidraft-loading-glow: var(--dark-loading-glow);
-  --voidraft-loading-done-color: var(--dark-loading-done-color);
-  --voidraft-loading-overlay: var(--dark-loading-overlay);
-  --voidraft-mono-font: "HarmonyOS Sans Mono", monospace;
-  
-  color-scheme: light dark;
+  --voidraft-font-mono: "HarmonyOS", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
 }
 
-/* 监听系统深色主题 */
-@media (prefers-color-scheme: dark) {
-  :root[data-theme="auto"] {
-    --toolbar-bg: var(--dark-toolbar-bg);
-    --toolbar-border: var(--dark-toolbar-border);
-    --toolbar-text: var(--dark-toolbar-text);
-    --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
-    --toolbar-button-hover: var(--dark-toolbar-button-hover);
-    --toolbar-separator: var(--dark-toolbar-button-hover);
-    --tab-active-line: var(--dark-tab-active-line);
-    --bg-secondary: var(--dark-bg-secondary);
-    --text-secondary: var(--dark-text-secondary);
-    --text-muted: var(--dark-text-muted);
-    --border-color: var(--dark-border-color);
-    --settings-bg: var(--dark-settings-bg);
-    --settings-card-bg: var(--dark-settings-card-bg);
-    --settings-text: var(--dark-settings-text);
-    --settings-text-secondary: var(--dark-settings-text-secondary);
-    --settings-border: var(--dark-settings-border);
-    --settings-input-bg: var(--dark-settings-input-bg);
-    --settings-input-border: var(--dark-settings-input-border);
-    --settings-hover: var(--dark-settings-hover);
-    --scrollbar-track: var(--dark-scrollbar-track);
-    --scrollbar-thumb: var(--dark-scrollbar-thumb);
-    --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
-    --selection-bg: var(--dark-selection-bg);
-    --selection-text: var(--dark-selection-text);
-    --text-danger: var(--dark-danger-color);
-    --bg-primary: var(--dark-bg-primary);
-    --bg-hover: var(--dark-bg-hover);
-    --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
-    --voidraft-loading-color: var(--dark-loading-color);
-    --voidraft-loading-glow: var(--dark-loading-glow);
-    --voidraft-loading-done-color: var(--dark-loading-done-color);
-    --voidraft-loading-overlay: var(--dark-loading-overlay);
-  }
+/* 默认/暗色主题 */
+:root,
+:root[data-theme="dark"],
+:root[data-theme="auto"] {
+  color-scheme: dark;
+
+  --text-primary: #ffffff;
+
+  --toolbar-bg: #2d2d2d;
+  --toolbar-border: #404040;
+  --toolbar-text: #ffffff;
+  --toolbar-text-secondary: #cccccc;
+  --toolbar-button-hover: #404040;
+  --toolbar-separator: #404040;
+
+  --tab-active-line: linear-gradient(90deg, #007acc 0%, #0099ff 100%);
+  --bg-secondary: #0e1217;
+  --bg-primary: #1a1a1a;
+  --bg-hover: #2a2a2a;
+
+  --text-secondary: #a0aec0;
+  --text-muted: #666666;
+  --text-danger: #ff6b6b;
+
+  --border-color: #2d3748;
+
+  --settings-bg: #2a2a2a;
+  --settings-card-bg: #333333;
+  --settings-text: #ffffff;
+  --settings-text-secondary: #cccccc;
+  --settings-border: #444444;
+  --settings-input-bg: #3a3a3a;
+  --settings-input-border: #555555;
+  --settings-hover: #404040;
+
+  --scrollbar-track: #2a2a2a;
+  --scrollbar-thumb: #555555;
+  --scrollbar-thumb-hover: #666666;
+
+  --selection-bg: rgba(181, 206, 168, 0.1);
+  --selection-text: #b5cea8;
+
+  --voidraft-bg-gradient: radial-gradient(#222922, #000500);
+  --voidraft-loading-color: #ffffff;
+  --voidraft-loading-glow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
+  --voidraft-loading-done-color: #66ff66;
+  --voidraft-loading-overlay: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
 }
 
-/* 监听系统浅色主题 */
+/* 亮色主题 */
+:root[data-theme="light"] {
+  color-scheme: light;
+
+  --text-primary: #000000;
+
+  --toolbar-bg: #f8f9fa;
+  --toolbar-border: #e9ecef;
+  --toolbar-text: #212529;
+  --toolbar-text-secondary: #495057;
+  --toolbar-button-hover: #e9ecef;
+  --toolbar-separator: #e9ecef;
+
+  --tab-active-line: linear-gradient(90deg, #0066cc 0%, #0088ff 100%);
+  --bg-secondary: #f7fef7;
+  --bg-primary: #ffffff;
+  --bg-hover: #f1f3f4;
+
+  --text-secondary: #374151;
+  --text-muted: #6b7280;
+  --text-danger: #dc3545;
+
+  --border-color: #e5e7eb;
+
+  --settings-bg: #ffffff;
+  --settings-card-bg: #f8f9fa;
+  --settings-text: #212529;
+  --settings-text-secondary: #6c757d;
+  --settings-border: #dee2e6;
+  --settings-input-bg: #ffffff;
+  --settings-input-border: #ced4da;
+  --settings-hover: #e9ecef;
+
+  --scrollbar-track: #f1f3f4;
+  --scrollbar-thumb: #c1c1c1;
+  --scrollbar-thumb-hover: #a8a8a8;
+
+  --selection-bg: rgba(59, 130, 246, 0.15);
+  --selection-text: #2563eb;
+
+  --voidraft-bg-gradient: radial-gradient(#f0f6f0, #e5efe5);
+  --voidraft-loading-color: #1a3c1a;
+  --voidraft-loading-glow: 0 0 10px rgba(0, 160, 0, 0.3), 0 0 5px rgba(0, 120, 0, 0.2);
+  --voidraft-loading-done-color: #008800;
+  --voidraft-loading-overlay: linear-gradient(transparent 0%, rgba(220, 240, 220, 0.5) 50%);
+}
+
+/* 跟随系统的浅色偏好 */
 @media (prefers-color-scheme: light) {
   :root[data-theme="auto"] {
-    --toolbar-bg: var(--light-toolbar-bg);
-    --toolbar-border: var(--light-toolbar-border);
-    --toolbar-text: var(--light-toolbar-text);
-    --toolbar-text-secondary: var(--light-toolbar-text-secondary);
-    --toolbar-button-hover: var(--light-toolbar-button-hover);
-    --toolbar-separator: var(--light-toolbar-button-hover);
-    --tab-active-line: var(--light-tab-active-line);
-    --bg-secondary: var(--light-bg-secondary);
-    --text-secondary: var(--light-text-secondary);
-    --text-muted: var(--light-text-muted);
-    --border-color: var(--light-border-color);
-    --settings-bg: var(--light-settings-bg);
-    --settings-card-bg: var(--light-settings-card-bg);
-    --settings-text: var(--light-settings-text);
-    --settings-text-secondary: var(--light-settings-text-secondary);
-    --settings-border: var(--light-settings-border);
-    --settings-input-bg: var(--light-settings-input-bg);
-    --settings-input-border: var(--light-settings-input-border);
-    --settings-hover: var(--light-settings-hover);
-    --scrollbar-track: var(--light-scrollbar-track);
-    --scrollbar-thumb: var(--light-scrollbar-thumb);
-    --scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
-    --selection-bg: var(--light-selection-bg);
-    --selection-text: var(--light-selection-text);
-    --text-danger: var(--light-danger-color);
-    --bg-primary: var(--light-bg-primary);
-    --bg-hover: var(--light-bg-hover);
-    --voidraft-bg-gradient: var(--light-loading-bg-gradient);
-    --voidraft-loading-color: var(--light-loading-color);
-    --voidraft-loading-glow: var(--light-loading-glow);
-    --voidraft-loading-done-color: var(--light-loading-done-color);
-    --voidraft-loading-overlay: var(--light-loading-overlay);
+    color-scheme: light;
+
+    --text-primary: #000000;
+
+    --toolbar-bg: #f8f9fa;
+    --toolbar-border: #e9ecef;
+    --toolbar-text: #212529;
+    --toolbar-text-secondary: #495057;
+    --toolbar-button-hover: #e9ecef;
+    --toolbar-separator: #e9ecef;
+
+    --tab-active-line: linear-gradient(90deg, #0066cc 0%, #0088ff 100%);
+    --bg-secondary: #f7fef7;
+    --bg-primary: #ffffff;
+    --bg-hover: #f1f3f4;
+
+    --text-secondary: #374151;
+    --text-muted: #6b7280;
+    --text-danger: #dc3545;
+
+    --border-color: #e5e7eb;
+
+    --settings-bg: #ffffff;
+    --settings-card-bg: #f8f9fa;
+    --settings-text: #212529;
+    --settings-text-secondary: #6c757d;
+    --settings-border: #dee2e6;
+    --settings-input-bg: #ffffff;
+    --settings-input-border: #ced4da;
+    --settings-hover: #e9ecef;
+
+    --scrollbar-track: #f1f3f4;
+    --scrollbar-thumb: #c1c1c1;
+    --scrollbar-thumb-hover: #a8a8a8;
+
+    --selection-bg: rgba(59, 130, 246, 0.15);
+    --selection-text: #2563eb;
+
+    --voidraft-bg-gradient: radial-gradient(#f0f6f0, #e5efe5);
+    --voidraft-loading-color: #1a3c1a;
+    --voidraft-loading-glow: 0 0 10px rgba(0, 160, 0, 0.3), 0 0 5px rgba(0, 120, 0, 0.2);
+    --voidraft-loading-done-color: #008800;
+    --voidraft-loading-overlay: linear-gradient(transparent 0%, rgba(220, 240, 220, 0.5) 50%);
   }
 }
-
-/* 手动选择浅色主题 */
-:root[data-theme="light"] {
-  --toolbar-bg: var(--light-toolbar-bg);
-  --toolbar-border: var(--light-toolbar-border);
-  --toolbar-text: var(--light-toolbar-text);
-  --toolbar-text-secondary: var(--light-toolbar-text-secondary);
-  --toolbar-button-hover: var(--light-toolbar-button-hover);
-  --toolbar-separator: var(--light-toolbar-button-hover);
-  --tab-active-line: var(--light-tab-active-line);
-  --bg-secondary: var(--light-bg-secondary);
-  --text-secondary: var(--light-text-secondary);
-  --text-muted: var(--light-text-muted);
-  --border-color: var(--light-border-color);
-  --settings-bg: var(--light-settings-bg);
-  --settings-card-bg: var(--light-settings-card-bg);
-  --settings-text: var(--light-settings-text);
-  --settings-text-secondary: var(--light-settings-text-secondary);
-  --settings-border: var(--light-settings-border);
-  --settings-input-bg: var(--light-settings-input-bg);
-  --settings-input-border: var(--light-settings-input-border);
-  --settings-hover: var(--light-settings-hover);
-  --scrollbar-track: var(--light-scrollbar-track);
-  --scrollbar-thumb: var(--light-scrollbar-thumb);
-  --scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
-  --selection-bg: var(--light-selection-bg);
-  --selection-text: var(--light-selection-text);
-  --text-danger: var(--light-danger-color);
-  --bg-primary: var(--light-bg-primary);
-  --bg-hover: var(--light-bg-hover);
-  --voidraft-bg-gradient: var(--light-loading-bg-gradient);
-  --voidraft-loading-color: var(--light-loading-color);
-  --voidraft-loading-glow: var(--light-loading-glow);
-  --voidraft-loading-done-color: var(--light-loading-done-color);
-  --voidraft-loading-overlay: var(--light-loading-overlay);
-}
-
-/* 手动选择深色主题 */
-:root[data-theme="dark"] {
-  --toolbar-bg: var(--dark-toolbar-bg);
-  --toolbar-border: var(--dark-toolbar-border);
-  --toolbar-text: var(--dark-toolbar-text);
-  --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
-  --toolbar-button-hover: var(--dark-toolbar-button-hover);
-  --toolbar-separator: var(--dark-toolbar-button-hover);
-  --tab-active-line: var(--dark-tab-active-line);
-  --bg-secondary: var(--dark-bg-secondary);
-  --text-secondary: var(--dark-text-secondary);
-  --text-muted: var(--dark-text-muted);
-  --border-color: var(--dark-border-color);
-  --settings-bg: var(--dark-settings-bg);
-  --settings-card-bg: var(--dark-settings-card-bg);
-  --settings-text: var(--dark-settings-text);
-  --settings-text-secondary: var(--dark-settings-text-secondary);
-  --settings-border: var(--dark-settings-border);
-  --settings-input-bg: var(--dark-settings-input-bg);
-  --settings-input-border: var(--dark-settings-input-border);
-  --settings-hover: var(--dark-settings-hover);
-  --scrollbar-track: var(--dark-scrollbar-track);
-  --scrollbar-thumb: var(--dark-scrollbar-thumb);
-  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
-  --selection-bg: var(--dark-selection-bg);
-  --selection-text: var(--dark-selection-text);
-  --text-danger: var(--dark-danger-color);
-  --bg-primary: var(--dark-bg-primary);
-  --bg-hover: var(--dark-bg-hover);
-  --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
-  --voidraft-loading-color: var(--dark-loading-color);
-  --voidraft-loading-glow: var(--dark-loading-glow);
-  --voidraft-loading-done-color: var(--dark-loading-done-color);
-  --voidraft-loading-overlay: var(--dark-loading-overlay);
-}
\ No newline at end of file
diff --git a/frontend/src/components/loading/LoadingScreen.vue b/frontend/src/components/loading/LoadingScreen.vue
index a262c59..fec414f 100644
--- a/frontend/src/components/loading/LoadingScreen.vue
+++ b/frontend/src/components/loading/LoadingScreen.vue
@@ -142,7 +142,7 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--voidraft-mono-font, monospace),serif;
+  font-family: var(--voidraft-font-mono, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace);
 }
 
 .loading-word {
@@ -175,4 +175,4 @@ onBeforeUnmount(() => {
   top: 0;
   pointer-events: none;
 }
-</style> 
\ No newline at end of file
+</style> 
diff --git a/frontend/src/stores/themeStore.ts b/frontend/src/stores/themeStore.ts
index 68aa04f..3e2a308 100644
--- a/frontend/src/stores/themeStore.ts
+++ b/frontend/src/stores/themeStore.ts
@@ -69,7 +69,7 @@ export const useThemeStore = defineStore('theme', () => {
   };
 
   // 初始化主题颜色
-  const initializeThemeColors = async () => {
+  const initThemeColors = async () => {
     // 加载所有主题
     await loadAllThemes();
     
@@ -91,7 +91,7 @@ export const useThemeStore = defineStore('theme', () => {
   const initializeTheme = async () => {
     const theme = currentTheme.value;
     applyThemeToDOM(theme);
-    await initializeThemeColors();
+    await initThemeColors();
   };
 
   // 设置系统主题模式（深色/浅色/自动）
@@ -132,7 +132,7 @@ export const useThemeStore = defineStore('theme', () => {
       throw new Error('No theme selected');
     }
 
-    const theme = allThemes.value.find(t => t.name === currentColors.value!.name);
+    const theme = allThemes.value.find(t => t.name === currentColors.value!.themeName);
     if (!theme) {
       throw new Error('Theme not found');
     }
@@ -148,12 +148,12 @@ export const useThemeStore = defineStore('theme', () => {
     }
     
     // 调用后端重置
-    await ThemeService.ResetTheme(0, currentColors.value.name);
+    await ThemeService.ResetTheme(0, currentColors.value.themeName);
     
     // 重新加载所有主题
     await loadAllThemes();
 
-    const updatedTheme = allThemes.value.find(t => t.name === currentColors.value!.name);
+    const updatedTheme = allThemes.value.find(t => t.name === currentColors.value!.themeName);
     
     if (updatedTheme) {
       currentColors.value = updatedTheme.colors as ThemeColors;
@@ -192,4 +192,4 @@ export const useThemeStore = defineStore('theme', () => {
     refreshEditorTheme,
     applyThemeToDOM,
   };
-});
\ No newline at end of file
+});
diff --git a/frontend/src/views/editor/basic/contentChangeExtension.ts b/frontend/src/views/editor/basic/contentChangeExtension.ts
index 036f372..7abc4e8 100644
--- a/frontend/src/views/editor/basic/contentChangeExtension.ts
+++ b/frontend/src/views/editor/basic/contentChangeExtension.ts
@@ -1,34 +1,48 @@
-import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
-import { useEditorStore } from '@/stores/editorStore';
+import {EditorView, ViewPlugin, ViewUpdate} from '@codemirror/view';
+import type {Text} from '@codemirror/state';
+import {useEditorStore} from '@/stores/editorStore';
 
 /**
- * 内容变化监听插件 - 集成文档和编辑器管理
  */
 export function createContentChangePlugin() {
   return ViewPlugin.fromClass(
     class ContentChangePlugin {
-      private editorStore = useEditorStore();
-      private lastContent = '';
+      private readonly editorStore = useEditorStore();
+      private lastDoc: Text;
+      private rafId: number | null = null;
+      private pendingNotification = false;
 
       constructor(private view: EditorView) {
-        this.lastContent = view.state.doc.toString();
+        this.lastDoc = view.state.doc;
       }
 
       update(update: ViewUpdate) {
-        if (!update.docChanged) return;
+        if (!update.docChanged || update.state.doc === this.lastDoc) {
+          return;
+        }
 
-        const newContent = this.view.state.doc.toString();
-        if (newContent === this.lastContent) return;
-
-        this.lastContent = newContent;
-        
-        this.editorStore.onContentChange();
-        
+        this.lastDoc = update.state.doc;
+        this.scheduleNotification();
       }
 
       destroy() {
+        if (this.rafId !== null) {
+          cancelAnimationFrame(this.rafId);
+          this.rafId = null;
+        }
+        this.pendingNotification = false;
+      }
 
+      private scheduleNotification() {
+        if (this.pendingNotification) return;
+
+        this.pendingNotification = true;
+        this.rafId = requestAnimationFrame(() => {
+          this.pendingNotification = false;
+          this.rafId = null;
+          this.editorStore.onContentChange();
+        });
       }
     }
   );
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/views/editor/theme/base.ts b/frontend/src/views/editor/theme/base.ts
index d5b6419..79d58ad 100644
--- a/frontend/src/views/editor/theme/base.ts
+++ b/frontend/src/views/editor/theme/base.ts
@@ -4,6 +4,8 @@ import {tags} from '@lezer/highlight';
 import {Extension} from '@codemirror/state';
 import type {ThemeColors} from './types';
 
+const MONO_FONT_FALLBACK = 'var(--voidraft-font-mono, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace)';
+
 /**
  * 创建通用主题
  * @param colors 主题颜色配置
@@ -12,27 +14,6 @@ import type {ThemeColors} from './types';
 export function createBaseTheme(colors: ThemeColors): Extension {
     // 编辑器主题样式
     const theme = EditorView.theme({
-        '&': {
-            color: colors.foreground,
-            backgroundColor: colors.background,
-        },
-
-        // 确保编辑器容器背景一致
-        '.cm-editor': {
-            backgroundColor: colors.background,
-        },
-
-        // 确保滚动区域背景一致
-        '.cm-scroller': {
-            backgroundColor: colors.background,
-            transition: 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        },
-
-        // 编辑器内容
-        '.cm-content': {
-            caretColor: colors.cursor,
-            paddingTop: '4px',
-        },
 
         // 光标
         '.cm-cursor, .cm-dropCursor': {
@@ -42,19 +23,11 @@ export function createBaseTheme(colors: ThemeColors): Extension {
             marginTop: '-2px',
         },
 
-        // 选择
-        '.cm-selectionBackground': {
-            backgroundColor: colors.selectionBlur,
-        },
+        // 选择背景
         '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
             backgroundColor: colors.selection,
         },
-        '.cm-content ::selection': {
-            backgroundColor: colors.selection,
-        },
-        '.cm-activeLine.code-empty-block-selected': {
-            backgroundColor: colors.selection,
-        },
+
 
         // 当前行高亮
         '.cm-activeLine': {
@@ -66,7 +39,6 @@ export function createBaseTheme(colors: ThemeColors): Extension {
             backgroundColor: colors.dark ? 'rgba(0,0,0, 0.1)' : 'rgba(0,0,0, 0.04)',
             color: colors.lineNumber,
             border: 'none',
-            borderRight: colors.dark ? 'none' : `1px solid ${colors.borderLight}`,
             padding: '0 2px 0 4px',
             userSelect: 'none',
         },
@@ -75,28 +47,7 @@ export function createBaseTheme(colors: ThemeColors): Extension {
             color: colors.activeLineNumber,
         },
 
-        // 折叠功能
-        '.cm-foldGutter': {
-            marginLeft: '0px',
-        },
-        '.cm-foldGutter .cm-gutterElement': {
-            opacity: 0,
-            transition: 'opacity 400ms',
-        },
-        '.cm-gutters:hover .cm-gutterElement': {
-            opacity: 1,
-        },
-        '.cm-foldPlaceholder': {
-            backgroundColor: 'transparent',
-            border: 'none',
-            color: colors.comment,
-        },
-
-        // 面板
-        '.cm-panels': {
-            // backgroundColor: colors.dropdownBackground,
-            // color: colors.foreground
-        },
+        // 面板动画效果
         '.cm-panels.cm-panels-top': {
             borderBottom: '2px solid black'
         },
@@ -124,57 +75,33 @@ export function createBaseTheme(colors: ThemeColors): Extension {
             }
         },
 
-        // 搜索匹配
-        '.cm-searchMatch': {
-            backgroundColor: 'transparent',
-            outline: `1px solid ${colors.searchMatch}`,
-        },
-        '.cm-searchMatch.cm-searchMatch-selected': {
-            backgroundColor: colors.searchMatch,
-            color: colors.background,
-        },
-        '.cm-selectionMatch': {
-            backgroundColor: colors.dark ? '#50606D' : '#e6f3ff',
-        },
-
         // 括号匹配
         '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
             outline: `0.5px solid ${colors.searchMatch}`,
         },
-        '&.cm-focused .cm-matchingBracket': {
-            backgroundColor: colors.matchingBracket,
-            color: 'inherit',
-        },
-        '&.cm-focused .cm-nonmatchingBracket': {
-            outline: colors.dark ? '0.5px solid #bc8f8f' : '0.5px solid #d73a49',
-        },
 
-        // 编辑器焦点
-        '&.cm-editor.cm-focused': {
-            outline: 'none',
-        },
 
         // 工具提示
-        '.cm-tooltip': {
-            border: colors.dark ? 'none' : `1px solid ${colors.dropdownBorder}`,
-            backgroundColor: colors.surface,
-            color: colors.foreground,
-            boxShadow: colors.dark ? 'none' : '0 2px 8px rgba(0,0,0,0.1)',
-        },
-        '.cm-tooltip .cm-tooltip-arrow:before': {
-            borderTopColor: 'transparent',
-            borderBottomColor: 'transparent',
-        },
-        '.cm-tooltip .cm-tooltip-arrow:after': {
-            borderTopColor: colors.surface,
-            borderBottomColor: colors.surface,
-        },
-        '.cm-tooltip-autocomplete': {
-            '& > ul > li[aria-selected]': {
-                backgroundColor: colors.activeLine,
-                color: colors.foreground,
-            },
-        },
+        // '.cm-tooltip': {
+        //     border: colors.dark ? 'none' : `1px solid ${colors.dropdownBorder}`,
+        //     backgroundColor: colors.surface,
+        //     // color: colors.foreground,
+        //     boxShadow: colors.dark ? 'none' : '0 2px 8px rgba(0,0,0,0.1)',
+        // },
+        // '.cm-tooltip .cm-tooltip-arrow:before': {
+        //     borderTopColor: 'transparent',
+        //     borderBottomColor: 'transparent',
+        // },
+        // '.cm-tooltip .cm-tooltip-arrow:after': {
+        //     borderTopColor: colors.surface,
+        //     borderBottomColor: colors.surface,
+        // },
+        // '.cm-tooltip-autocomplete': {
+        //     '& > ul > li[aria-selected]': {
+        //         backgroundColor: colors.activeLine,
+        //         color: colors.foreground,
+        //     },
+        // },
 
         // 代码块层（自定义）
         '.code-blocks-layer': {
@@ -234,80 +161,114 @@ export function createBaseTheme(colors: ThemeColors): Extension {
         },
     }, {dark: colors.dark});
 
-    // 语法高亮样式
     const highlightStyle = HighlightStyle.define([
-        // 关键字
+        {tag: tags.comment, color: colors.comment, fontStyle: 'italic'},
+        {tag: tags.lineComment, color: colors.lineComment, fontStyle: 'italic'},
+        {tag: tags.blockComment, color: colors.blockComment, fontStyle: 'italic'},
+        {tag: tags.docComment, color: colors.docComment, fontStyle: 'italic'},
+
+        {tag: tags.name, color: colors.name},
+        {tag: tags.variableName, color: colors.variableName},
+        {tag: tags.typeName, color: colors.typeName},
+        {tag: tags.tagName, color: colors.tagName},
+        {tag: tags.propertyName, color: colors.propertyName},
+        {tag: tags.attributeName, color: colors.attributeName},
+        {tag: tags.className, color: colors.className},
+        {tag: tags.labelName, color: colors.labelName},
+        {tag: tags.namespace, color: colors.namespace},
+        {tag: tags.macroName, color: colors.macroName},
+
+        {tag: tags.literal, color: colors.literal},
+        {tag: tags.string, color: colors.string},
+        {tag: tags.docString, color: colors.docString},
+        {tag: tags.character, color: colors.character},
+        {tag: tags.attributeValue, color: colors.attributeValue},
+        {tag: tags.number, color: colors.number},
+        {tag: tags.integer, color: colors.integer},
+        {tag: tags.float, color: colors.float},
+        {tag: tags.bool, color: colors.bool},
+        {tag: tags.regexp, color: colors.regexp},
+        {tag: tags.escape, color: colors.escape},
+        {tag: tags.color, color: colors.color},
+        {tag: tags.url, color: colors.url},
+
         {tag: tags.keyword, color: colors.keyword},
+        {tag: tags.self, color: colors.self},
+        {tag: tags.null, color: colors.null},
+        {tag: tags.atom, color: colors.atom},
+        {tag: tags.unit, color: colors.unit},
+        {tag: tags.modifier, color: colors.modifier},
+        {tag: tags.operatorKeyword, color: colors.operatorKeyword},
+        {tag: tags.controlKeyword, color: colors.controlKeyword},
+        {tag: tags.definitionKeyword, color: colors.definitionKeyword},
+        {tag: tags.moduleKeyword, color: colors.moduleKeyword},
 
-        // 操作符
-        {tag: [tags.operator, tags.operatorKeyword], color: colors.operator},
+        {tag: tags.operator, color: colors.operator},
+        {tag: tags.derefOperator, color: colors.derefOperator},
+        {tag: tags.arithmeticOperator, color: colors.arithmeticOperator},
+        {tag: tags.logicOperator, color: colors.logicOperator},
+        {tag: tags.bitwiseOperator, color: colors.bitwiseOperator},
+        {tag: tags.compareOperator, color: colors.compareOperator},
+        {tag: tags.updateOperator, color: colors.updateOperator},
+        {tag: tags.definitionOperator, color: colors.definitionOperator},
+        {tag: tags.typeOperator, color: colors.typeOperator},
+        {tag: tags.controlOperator, color: colors.controlOperator},
 
-        // 名称、变量
-        {tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: colors.variable},
-        {tag: [tags.variableName], color: colors.variable},
-        {tag: [tags.labelName], color: colors.operator},
-        {tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: colors.variable},
+        {tag: tags.punctuation, color: colors.punctuation},
+        {tag: tags.separator, color: colors.separator},
+        {tag: tags.bracket, color: colors.bracket},
+        {tag: tags.angleBracket, color: colors.angleBracket},
+        {tag: tags.squareBracket, color: colors.squareBracket},
+        {tag: tags.paren, color: colors.paren},
+        {tag: tags.brace, color: colors.brace},
 
-        // 函数
-        {tag: [tags.function(tags.variableName)], color: colors.function},
-        {tag: [tags.propertyName], color: colors.function},
+        {tag: tags.content, color: colors.content},
+        {tag: tags.heading, color: colors.heading, fontWeight: 'bold'},
+        {tag: tags.heading1, color: colors.heading1, fontWeight: 'bold', fontSize: '1.4em'},
+        {tag: tags.heading2, color: colors.heading2, fontWeight: 'bold', fontSize: '1.3em'},
+        {tag: tags.heading3, color: colors.heading3, fontWeight: 'bold', fontSize: '1.2em'},
+        {tag: tags.heading4, color: colors.heading4, fontWeight: 'bold', fontSize: '1.1em'},
+        {tag: tags.heading5, color: colors.heading5, fontWeight: 'bold'},
+        {tag: tags.heading6, color: colors.heading6, fontWeight: 'bold'},
+        {tag: tags.contentSeparator, color: colors.contentSeparator},
+        {tag: tags.list, color: colors.list},
+        {tag: tags.quote, color: colors.quote, fontStyle: 'italic'},
+        {tag: tags.emphasis, color: colors.emphasis, fontStyle: 'italic'},
+        {tag: tags.strong, color: colors.strong, fontWeight: 'bold'},
+        {tag: tags.link, color: colors.link, textDecoration: 'underline'},
+        {tag: tags.monospace, color: colors.monospace, fontFamily: MONO_FONT_FALLBACK},
+        {tag: tags.strikethrough, color: colors.strikethrough, textDecoration: 'line-through'},
 
-        // 类型、类
-        {tag: [tags.typeName], color: colors.type},
-        {tag: [tags.className], color: colors.class},
+        {tag: tags.inserted, color: colors.inserted},
+        {tag: tags.deleted, color: colors.deleted},
+        {tag: tags.changed, color: colors.changed},
 
-        // 常量
-        {tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: colors.constant},
+        {tag: tags.meta, color: colors.meta, fontStyle: 'italic'},
+        {tag: tags.documentMeta, color: colors.documentMeta},
+        {tag: tags.annotation, color: colors.annotation},
+        {tag: tags.processingInstruction, color: colors.processingInstruction},
 
-        // 字符串
-        {tag: [tags.processingInstruction, tags.string, tags.inserted], color: colors.string},
-        {tag: [tags.special(tags.string)], color: colors.string},
-        {tag: [tags.quote], color: colors.comment},
+        {tag: tags.definition(tags.variableName), color: colors.definition},
+        {tag: tags.definition(tags.propertyName), color: colors.definition},
+        {tag: tags.definition(tags.name), color: colors.definition},
+        {tag: tags.constant(tags.variableName), color: colors.constant},
+        {tag: tags.constant(tags.propertyName), color: colors.constant},
+        {tag: tags.constant(tags.name), color: colors.constant},
+        {tag: tags.function(tags.variableName), color: colors.function},
+        {tag: tags.function(tags.propertyName), color: colors.function},
+        {tag: tags.function(tags.name), color: colors.function},
+        {tag: tags.standard(tags.variableName), color: colors.standard},
+        {tag: tags.standard(tags.name), color: colors.standard},
+        {tag: tags.local(tags.variableName), color: colors.local},
+        {tag: tags.local(tags.name), color: colors.local},
+        {tag: tags.special(tags.variableName), color: colors.special},
+        {tag: tags.special(tags.name), color: colors.special},
+        {tag: tags.special(tags.string), color: colors.special},
 
-        // 数字
-        {
-            tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
-            color: colors.number
-        },
-
-        // 正则表达式
-        {tag: [tags.url, tags.escape, tags.regexp, tags.link], color: colors.regexp},
-
-        // 注释
-        {tag: [tags.meta, tags.comment], color: colors.comment, fontStyle: 'italic'},
-
-        // 分隔符、括号
-        {tag: [tags.definition(tags.name), tags.separator], color: colors.variable},
-        {tag: [tags.brace], color: colors.variable},
-        {tag: [tags.squareBracket], color: colors.dark ? '#bf616a' : colors.keyword},
-        {tag: [tags.angleBracket], color: colors.dark ? '#d08770' : colors.operator},
-        {tag: [tags.attributeName], color: colors.variable},
-
-        // 标签
-        {tag: [tags.tagName], color: colors.number},
-
-        // 注解
-        {tag: [tags.annotation], color: colors.invalid},
-
-        // 特殊样式
-        {tag: tags.strong, fontWeight: 'bold'},
-        {tag: tags.emphasis, fontStyle: 'italic'},
-        {tag: tags.strikethrough, textDecoration: 'line-through'},
-        {tag: tags.link, color: colors.variable, textDecoration: 'underline'},
-
-        // 标题
-        {tag: tags.heading, fontWeight: 'bold', color: colors.heading},
-        {tag: [tags.heading1, tags.heading2], fontSize: '1.4em'},
-        {tag: [tags.heading3, tags.heading4], fontSize: '1.2em'},
-        {tag: [tags.heading5, tags.heading6], fontSize: '1.1em'},
-
-        // 无效内容
         {tag: tags.invalid, color: colors.invalid},
     ]);
-
     return [
         theme,
         syntaxHighlighting(highlightStyle),
     ];
 }
-
diff --git a/frontend/src/views/editor/theme/dark/aura.ts b/frontend/src/views/editor/theme/dark/aura.ts
index 503cdbe..c965e98 100644
--- a/frontend/src/views/editor/theme/dark/aura.ts
+++ b/frontend/src/views/editor/theme/dark/aura.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'aura',
+  themeName: 'aura',
   dark: true,
-  
-  // 基础色调
+
   background: '#21202e',
-  backgroundSecondary: '#2B2A3BFF',
+  backgroundSecondary: '#2b2a3b',
   surface: '#21202e',
   dropdownBackground: '#21202e',
   dropdownBorder: '#3b334b',
-  
-  // 文本颜色
+
   foreground: '#edecee',
-  foregroundSecondary: '#edecee',
-  comment: '#6d6d6d',
-  
-  // 语法高亮色 - 核心
-  keyword: '#a277ff',
-  string: '#61ffca',
-  function: '#ffca85',
-  number: '#61ffca',
-  operator: '#a277ff',
-  variable: '#edecee',
-  type: '#82e2ff',
-  
-  // 语法高亮色 - 扩展
-  constant: '#61ffca',
-  storage: '#a277ff',
-  parameter: '#edecee',
-  class: '#82e2ff',
-  heading: '#a277ff',
-  invalid: '#ff6767',
-  regexp: '#61ffca',
-  
-  // 界面元素
+  foregroundSecondary: '#c9c5cf',
   cursor: '#a277ff',
   selection: '#3d375e7f',
   selectionBlur: '#3d375e7f',
   activeLine: '#4d4b6622',
   lineNumber: '#a394f033',
   activeLineNumber: '#cdccce',
-  
-  // 边框和分割线
+  diffInserted: '#61ffca',
+  diffDeleted: '#ff6767',
+  diffChanged: '#ffca85',
   borderColor: '#3b334b',
   borderLight: '#edecee19',
-  
-  // 搜索和匹配
   searchMatch: '#61ffca',
   matchingBracket: '#a394f033',
-}
 
-// 使用通用主题工厂函数创建 Aura 主题
-export const aura: Extension = createBaseTheme(config)
+  comment: '#6d6d6d',
+  lineComment: '#5c5c5c',
+  blockComment: '#5a5a5a',
+  docComment: '#747474',
+  name: '#edecee',
+  variableName: '#edecee',
+  typeName: '#82e2ff',
+  tagName: '#7cd4ff',
+  propertyName: '#d2d1f9',
+  attributeName: '#f6d1ff',
+  className: '#95dbff',
+  labelName: '#ffc285',
+  namespace: '#6fd0ff',
+  macroName: '#ffca85',
+  literal: '#82e2ff',
+  string: '#61ffca',
+  docString: '#61ffca',
+  character: '#73ffd7',
+  attributeValue: '#ffe3c4',
+  number: '#82e2ff',
+  integer: '#82e2ff',
+  float: '#82e2ff',
+  bool: '#ffd18b',
+  regexp: '#61ffca',
+  escape: '#4ff7c6',
+  color: '#ffc57c',
+  url: '#7cd4ff',
+  keyword: '#a277ff',
+  self: '#c89eff',
+  null: '#f69aff',
+  atom: '#61ffca',
+  unit: '#61ffca',
+  modifier: '#c094ff',
+  operatorKeyword: '#b98dff',
+  controlKeyword: '#c17aff',
+  definitionKeyword: '#bd8eff',
+  moduleKeyword: '#cfa2ff',
+  operator: '#a277ff',
+  derefOperator: '#c59bff',
+  arithmeticOperator: '#c78df5',
+  logicOperator: '#c088ff',
+  bitwiseOperator: '#ce8cff',
+  compareOperator: '#c786ff',
+  updateOperator: '#bb7cff',
+  definitionOperator: '#b070ff',
+  typeOperator: '#b98aff',
+  controlOperator: '#a867ff',
+  punctuation: '#d1a6ff',
+  separator: '#ceb1ff',
+  bracket: '#adabff',
+  angleBracket: '#ffc3ff',
+  squareBracket: '#ff9ddd',
+  paren: '#f39ddf',
+  brace: '#f589d6',
+  content: '#edecee',
+  heading: '#a277ff',
+  heading1: '#caa0ff',
+  heading2: '#c192ff',
+  heading3: '#b684ff',
+  heading4: '#aa76ff',
+  heading5: '#9f68ff',
+  heading6: '#955aff',
+  contentSeparator: '#a277ff',
+  list: '#c0c0c0',
+  quote: '#9280a3',
+  emphasis: '#edecee',
+  strong: '#f4f3f5',
+  link: '#79d3ff',
+  monospace: '#d5d0d8',
+  strikethrough: '#b9b3c0',
+  inserted: '#61ffca',
+  deleted: '#ff6767',
+  changed: '#ffca85',
+  invalid: '#ff6767',
+  meta: '#807d8c',
+  documentMeta: '#7b7886',
+  annotation: '#7df5d9',
+  processingInstruction: '#7b7490',
+  definition: '#d0cfe4',
+  constant: '#61ffca',
+  function: '#ffca85',
+  standard: '#c1c0cf',
+  local: '#c9c8d7',
+  special: '#ffd9a8',
+};
+
+export const aura: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/dark/default-dark.ts b/frontend/src/views/editor/theme/dark/default-dark.ts
index 5522b5c..98dc7c0 100644
--- a/frontend/src/views/editor/theme/dark/default-dark.ts
+++ b/frontend/src/views/editor/theme/dark/default-dark.ts
@@ -1,63 +1,121 @@
 import {createBaseTheme} from '../base';
 import type {ThemeColors} from '../types';
 
-// 默认深色主题颜色
 export const defaultDarkColors: ThemeColors = {
-  // 主题信息
-  name: 'default-dark',
+  themeName: 'default-dark',
   dark: true,
 
   // 基础色调
-  background: '#252B37',        // 主背景色
-  backgroundSecondary: '#213644', // 次要背景色
-  surface: '#474747',           // 面板背景
-  dropdownBackground: '#252B37', // 下拉菜单背景
-  dropdownBorder: '#ffffff19',  // 下拉菜单边框
+  background: '#252B37',
+  backgroundSecondary: '#213644',
+  surface: '#474747',
+  dropdownBackground: '#252B37',
+  dropdownBorder: '#ffffff19',
 
-  // 文本颜色
-  foreground: '#9BB586',        // 主文本色
-  foregroundSecondary: '#9c9c9c', // 次要文本色
-  comment: '#6272a4',           // 注释色
+  // 文本与界面色
+  foreground: '#9BB586',
+  foregroundSecondary: '#9c9c9c',
+  cursor: '#ffffff',
+  selection: '#0865a9',
+  selectionBlur: '#225377',
+  activeLine: '#ffffff0a',
+  lineNumber: '#ffffff26',
+  activeLineNumber: '#ffffff99',
+  diffInserted: '#64d189',
+  diffDeleted: '#ff6b6b',
+  diffChanged: '#ffb86c',
+  borderColor: '#1e222a',
+  borderLight: '#ffffff19',
+  searchMatch: '#8fbcbb',
+  matchingBracket: '#ffffff19',
 
-  // 语法高亮色 - 核心
-  keyword: '#ff79c6',           // 关键字
-  string: '#f1fa8c',            // 字符串
-  function: '#50fa7b',          // 函数名
-  number: '#bd93f9',            // 数字
-  operator: '#ff79c6',          // 操作符
-  variable: '#8fbcbb',          // 变量
-  type: '#8be9fd',             // 类型
-
-  // 语法高亮色 - 扩展
-  constant: '#bd93f9',          // 常量
-  storage: '#ff79c6',           // 存储类型
-  parameter: '#8fbcbb',         // 参数
-  class: '#8be9fd',             // 类名
-  heading: '#ff79c6',           // 标题
-  invalid: '#d30102',           // 无效内容
-  regexp: '#f1fa8c',            // 正则表达式
-
-  // 界面元素
-  cursor: '#ffffff',            // 光标
-  selection: '#0865a9',         // 选中背景
-  selectionBlur: '#225377',     // 失焦选中背景
-  activeLine: '#ffffff0a',      // 当前行高亮
-  lineNumber: '#ffffff26',      // 行号
-  activeLineNumber: '#ffffff99', // 活动行号
-
-  // 边框和分割线
-  borderColor: '#1e222a',       // 边框色
-  borderLight: '#ffffff19',     // 浅色边框
-
-  // 搜索和匹配
-  searchMatch: '#8fbcbb',       // 搜索匹配
-  matchingBracket: '#ffffff19', // 匹配括号
+  // 语法标签色值
+  comment: '#6272a4',
+  lineComment: '#5c6b99',
+  blockComment: '#596492',
+  docComment: '#6e7bb5',
+  name: '#dfe8ce',
+  variableName: '#8fbcbb',
+  typeName: '#8be9fd',
+  tagName: '#77d7f4',
+  propertyName: '#c9e3b0',
+  attributeName: '#e1c8ff',
+  className: '#a5e0ff',
+  labelName: '#f7b267',
+  namespace: '#5cd1ff',
+  macroName: '#ffcf8b',
+  literal: '#c3b5ff',
+  string: '#f1fa8c',
+  docString: '#e9f28a',
+  character: '#ffd684',
+  attributeValue: '#ffe099',
+  number: '#bd93f9',
+  integer: '#c6a5ff',
+  float: '#b68afd',
+  bool: '#7dd4cc',
+  regexp: '#9cf0f1',
+  escape: '#85dedd',
+  color: '#ffd38d',
+  url: '#8de0ff',
+  keyword: '#ff79c6',
+  self: '#ff94d6',
+  null: '#ff9fe2',
+  atom: '#cba6ff',
+  unit: '#a8dbd2',
+  modifier: '#f78cc8',
+  operatorKeyword: '#ff84cf',
+  controlKeyword: '#ff6fb6',
+  definitionKeyword: '#ff92d6',
+  moduleKeyword: '#ff8aca',
+  operator: '#ff79c6',
+  derefOperator: '#ff9bd6',
+  arithmeticOperator: '#ff7fc4',
+  logicOperator: '#ff9fcf',
+  bitwiseOperator: '#ff6fb8',
+  compareOperator: '#ff85c7',
+  updateOperator: '#ff76bd',
+  definitionOperator: '#ff6db7',
+  typeOperator: '#ff9bdd',
+  controlOperator: '#ff69ad',
+  punctuation: '#f5a6d9',
+  separator: '#f0a3d7',
+  bracket: '#cda0ff',
+  angleBracket: '#ffc0f1',
+  squareBracket: '#ff8db5',
+  paren: '#ff9ec8',
+  brace: '#fe7ab1',
+  content: '#dfeed0',
+  heading: '#ff9b6b',
+  heading1: '#ffb75f',
+  heading2: '#ffad57',
+  heading3: '#ffa14e',
+  heading4: '#ff9447',
+  heading5: '#ff8842',
+  heading6: '#ff7b3c',
+  contentSeparator: '#ff79c6',
+  list: '#acd1a2',
+  quote: '#7c8fb5',
+  emphasis: '#d9f7c1',
+  strong: '#fdf1c1',
+  link: '#6ac8ff',
+  monospace: '#d1dbc0',
+  strikethrough: '#b7c3a5',
+  inserted: '#64d189',
+  deleted: '#ff6b6b',
+  changed: '#ffb86c',
+  invalid: '#d30102',
+  meta: '#7285bb',
+  documentMeta: '#6a7caa',
+  annotation: '#9bf0ff',
+  processingInstruction: '#7685bd',
+  definition: '#9ec9c3',
+  constant: '#bd93f9',
+  function: '#50fa7b',
+  standard: '#8ab0a8',
+  local: '#92c7bb',
+  special: '#f4d67a',
 };
 
-// 创建深色主题
 export function createDarkTheme(colors: ThemeColors = defaultDarkColors) {
   return createBaseTheme({...colors, dark: true});
 }
-
-// 默认深色主题
-export const defaultDark = createDarkTheme(defaultDarkColors);
\ No newline at end of file
diff --git a/frontend/src/views/editor/theme/dark/dracula.ts b/frontend/src/views/editor/theme/dark/dracula.ts
index baaad89..8bea88a 100644
--- a/frontend/src/views/editor/theme/dark/dracula.ts
+++ b/frontend/src/views/editor/theme/dark/dracula.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'dracula',
+  themeName: 'dracula',
   dark: true,
-  
-  // 基础色调
-  background: '#282A36',
-  backgroundSecondary: '#323543FF',
-  surface: '#282A36',
-  dropdownBackground: '#282A36',
-  dropdownBorder: '#191A21',
-  
-  // 文本颜色
-  foreground: '#F8F8F2',
-  foregroundSecondary: '#F8F8F2',
-  comment: '#6272A4',
-  
-  // 语法高亮色 - 核心
-  keyword: '#FF79C6',
-  string: '#F1FA8C',
-  function: '#50FA7B',
-  number: '#BD93F9',
-  operator: '#FF79C6',
-  variable: '#F8F8F2',
-  type: '#8BE9FD',
-  
-  // 语法高亮色 - 扩展
-  constant: '#BD93F9',
-  storage: '#FF79C6',
-  parameter: '#F8F8F2',
-  class: '#8BE9FD',
-  heading: '#BD93F9',
-  invalid: '#FF5555',
-  regexp: '#F1FA8C',
-  
-  // 界面元素
-  cursor: '#F8F8F2',
-  selection: '#44475A',
-  selectionBlur: '#44475A',
-  activeLine: '#53576c22',
-  lineNumber: '#6272A4',
-  activeLineNumber: '#F8F8F2',
-  
-  // 边框和分割线
-  borderColor: '#191A21',
-  borderLight: '#F8F8F219',
-  
-  // 搜索和匹配
-  searchMatch: '#50FA7B',
-  matchingBracket: '#44475A',
-}
 
-// 使用通用主题工厂函数创建 Dracula 主题
-export const dracula: Extension = createBaseTheme(config)
+  background: '#282a36',
+  backgroundSecondary: '#323543',
+  surface: '#282a36',
+  dropdownBackground: '#282a36',
+  dropdownBorder: '#191a21',
+
+  foreground: '#f8f8f2',
+  foregroundSecondary: '#cfcfc9',
+  cursor: '#f8f8f2',
+  selection: '#44475a',
+  selectionBlur: '#44475a',
+  activeLine: '#53576c22',
+  lineNumber: '#6272a4',
+  activeLineNumber: '#f8f8f2',
+  diffInserted: '#50fa7b',
+  diffDeleted: '#ff5555',
+  diffChanged: '#f1fa8c',
+  borderColor: '#191a21',
+  borderLight: '#f8f8f219',
+  searchMatch: '#50fa7b',
+  matchingBracket: '#44475a',
+
+  comment: '#6272a4',
+  lineComment: '#55608c',
+  blockComment: '#4f597f',
+  docComment: '#7c89bd',
+  name: '#f8f8f2',
+  variableName: '#f8f8f2',
+  typeName: '#8be9fd',
+  tagName: '#7de5ff',
+  propertyName: '#dcdce5',
+  attributeName: '#fcb5ff',
+  className: '#9cecff',
+  labelName: '#ffb86c',
+  namespace: '#6deeff',
+  macroName: '#50fa7b',
+  literal: '#bd93f9',
+  string: '#f1fa8c',
+  docString: '#f5ffa9',
+  character: '#ffec99',
+  attributeValue: '#ffcf99',
+  number: '#bd93f9',
+  integer: '#cfa6ff',
+  float: '#b48cff',
+  bool: '#ffb38b',
+  regexp: '#f1fa8c',
+  escape: '#f7ffae',
+  color: '#ffcf99',
+  url: '#8ae8ff',
+  keyword: '#ff79c6',
+  self: '#ff9dd7',
+  null: '#ff8fb0',
+  atom: '#bd93f9',
+  unit: '#bd93f9',
+  modifier: '#ff90d4',
+  operatorKeyword: '#ff8bd2',
+  controlKeyword: '#ff7dc1',
+  definitionKeyword: '#ff91d1',
+  moduleKeyword: '#ffacd9',
+  operator: '#ff79c6',
+  derefOperator: '#ff91d1',
+  arithmeticOperator: '#ff88c5',
+  logicOperator: '#ff8bcf',
+  bitwiseOperator: '#ff74ba',
+  compareOperator: '#ff86c6',
+  updateOperator: '#ff7cbf',
+  definitionOperator: '#ff6aae',
+  typeOperator: '#ff98d9',
+  controlOperator: '#ff6aa6',
+  punctuation: '#f4ade4',
+  separator: '#f3a6dc',
+  bracket: '#cfaefc',
+  angleBracket: '#ffcff1',
+  squareBracket: '#ff9fcc',
+  paren: '#ffb1d8',
+  brace: '#ff90c1',
+  content: '#f8f8f2',
+  heading: '#bd93f9',
+  heading1: '#d2b3ff',
+  heading2: '#c7a8ff',
+  heading3: '#bb9dff',
+  heading4: '#af92ff',
+  heading5: '#a387ff',
+  heading6: '#977cff',
+  contentSeparator: '#ff79c6',
+  list: '#c8cbd1',
+  quote: '#7b86a7',
+  emphasis: '#f8f8f2',
+  strong: '#ffffff',
+  link: '#8be9fd',
+  monospace: '#dadfde',
+  strikethrough: '#c2c8d1',
+  inserted: '#50fa7b',
+  deleted: '#ff5555',
+  changed: '#f1fa8c',
+  invalid: '#ff5555',
+  meta: '#8791bb',
+  documentMeta: '#7b84aa',
+  annotation: '#a7f7d4',
+  processingInstruction: '#6c7699',
+  definition: '#d6d9f2',
+  constant: '#bd93f9',
+  function: '#50fa7b',
+  standard: '#bac4d8',
+  local: '#c3c8da',
+  special: '#ffd6a5',
+};
+
+export const dracula: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/dark/github-dark.ts b/frontend/src/views/editor/theme/dark/github-dark.ts
index 7b9eb6a..32fee75 100644
--- a/frontend/src/views/editor/theme/dark/github-dark.ts
+++ b/frontend/src/views/editor/theme/dark/github-dark.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'github-dark',
+  themeName: 'github-dark',
   dark: true,
-  
-  // 基础色调
+
   background: '#24292e',
-  backgroundSecondary: '#2E343BFF',
+  backgroundSecondary: '#2e343b',
   surface: '#24292e',
   dropdownBackground: '#24292e',
   dropdownBorder: '#1b1f23',
-  
-  // 文本颜色
+
   foreground: '#d1d5da',
-  foregroundSecondary: '#d1d5da',
-  comment: '#6a737d',
-  
-  // 语法高亮色 - 核心
-  keyword: '#f97583',
-  string: '#9ecbff',
-  function: '#79b8ff',
-  number: '#79b8ff',
-  operator: '#f97583',
-  variable: '#ffab70',
-  type: '#79b8ff',
-  
-  // 语法高亮色 - 扩展
-  constant: '#79b8ff',
-  storage: '#f97583',
-  parameter: '#e1e4e8',
-  class: '#b392f0',
-  heading: '#79b8ff',
-  invalid: '#f97583',
-  regexp: '#9ecbff',
-  
-  // 界面元素
+  foregroundSecondary: '#b3bac2',
   cursor: '#c8e1ff',
-  selection: '#3392FF44',
-  selectionBlur: '#3392FF44',
+  selection: '#3392ff44',
+  selectionBlur: '#3392ff44',
   activeLine: '#4d566022',
   lineNumber: '#444d56',
   activeLineNumber: '#e1e4e8',
-  
-  // 边框和分割线
+  diffInserted: '#2ea043',
+  diffDeleted: '#d73a49',
+  diffChanged: '#c69026',
   borderColor: '#1b1f23',
   borderLight: '#d1d5da19',
-  
-  // 搜索和匹配
   searchMatch: '#79b8ff',
-  matchingBracket: '#17E5E650',
-}
+  matchingBracket: '#17e5e650',
 
-// 使用通用主题工厂函数创建 GitHub Dark 主题
-export const githubDark: Extension = createBaseTheme(config)
+  comment: '#6a737d',
+  lineComment: '#596068',
+  blockComment: '#4f555c',
+  docComment: '#7c858f',
+  name: '#d1d5da',
+  variableName: '#ffab70',
+  typeName: '#79b8ff',
+  tagName: '#8dd1ff',
+  propertyName: '#d9dee5',
+  attributeName: '#c0a7ff',
+  className: '#b392f0',
+  labelName: '#ffab70',
+  namespace: '#84c5ff',
+  macroName: '#79b8ff',
+  literal: '#79b8ff',
+  string: '#9ecbff',
+  docString: '#aed3ff',
+  character: '#ffe4b2',
+  attributeValue: '#ffcf9a',
+  number: '#79b8ff',
+  integer: '#6fb1ff',
+  float: '#62a7ff',
+  bool: '#ffa657',
+  regexp: '#9ecbff',
+  escape: '#8bc2ff',
+  color: '#ffc27c',
+  url: '#68b7ff',
+  keyword: '#f97583',
+  self: '#ffa5b1',
+  null: '#ff8b76',
+  atom: '#79b8ff',
+  unit: '#79b8ff',
+  modifier: '#ff9a8c',
+  operatorKeyword: '#ff8c80',
+  controlKeyword: '#ff7f73',
+  definitionKeyword: '#ff9aa1',
+  moduleKeyword: '#ffb1ae',
+  operator: '#f97583',
+  derefOperator: '#ff8a7d',
+  arithmeticOperator: '#ff7c6a',
+  logicOperator: '#ff8172',
+  bitwiseOperator: '#ff6958',
+  compareOperator: '#ff7c6c',
+  updateOperator: '#ff6d5e',
+  definitionOperator: '#ff5d54',
+  typeOperator: '#ff8ca5',
+  controlOperator: '#ff5b4f',
+  punctuation: '#d6a3c5',
+  separator: '#d2a9c9',
+  bracket: '#98a6c8',
+  angleBracket: '#c3d5ff',
+  squareBracket: '#b6c4e4',
+  paren: '#b0bace',
+  brace: '#a1aabf',
+  content: '#d1d5da',
+  heading: '#79b8ff',
+  heading1: '#9ac7ff',
+  heading2: '#8fbfff',
+  heading3: '#85b7ff',
+  heading4: '#7bafff',
+  heading5: '#70a7ff',
+  heading6: '#669eff',
+  contentSeparator: '#f97583',
+  list: '#b8bfc7',
+  quote: '#7d848c',
+  emphasis: '#d1d5da',
+  strong: '#f5f7f9',
+  link: '#79b8ff',
+  monospace: '#cfd6df',
+  strikethrough: '#acb4bd',
+  inserted: '#2ea043',
+  deleted: '#d73a49',
+  changed: '#c69026',
+  invalid: '#f97583',
+  meta: '#8591a1',
+  documentMeta: '#7b8593',
+  annotation: '#90d6ff',
+  processingInstruction: '#6a7380',
+  definition: '#cdd4de',
+  constant: '#79b8ff',
+  function: '#79b8ff',
+  standard: '#bac4d1',
+  local: '#c5ccd7',
+  special: '#ffd9a6',
+};
+
+export const githubDark: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/dark/material-dark.ts b/frontend/src/views/editor/theme/dark/material-dark.ts
index 019cf1f..cd4367d 100644
--- a/frontend/src/views/editor/theme/dark/material-dark.ts
+++ b/frontend/src/views/editor/theme/dark/material-dark.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'material-dark',
+  themeName: 'material-dark',
   dark: true,
-  
-  // 基础色调
+
   background: '#263238',
-  backgroundSecondary: '#2D3E46FF',
+  backgroundSecondary: '#2d3e46',
   surface: '#263238',
   dropdownBackground: '#263238',
-  dropdownBorder: '#FFFFFF10',
-  
-  // 文本颜色
-  foreground: '#EEFFFF',
-  foregroundSecondary: '#EEFFFF',
-  comment: '#546E7A',
-  
-  // 语法高亮色 - 核心
-  keyword: '#C792EA',
-  string: '#C3E88D',
-  function: '#82AAFF',
-  number: '#F78C6C',
-  operator: '#C792EA',
-  variable: '#EEFFFF',
-  type: '#B2CCD6',
-  
-  // 语法高亮色 - 扩展
-  constant: '#F78C6C',
-  storage: '#C792EA',
-  parameter: '#EEFFFF',
-  class: '#FFCB6B',
-  heading: '#C3E88D',
-  invalid: '#FF5370',
-  regexp: '#89DDFF',
-  
-  // 界面元素
-  cursor: '#FFCC00',
-  selection: '#80CBC420',
-  selectionBlur: '#80CBC420',
-  activeLine: '#4c616c22',
-  lineNumber: '#37474F',
-  activeLineNumber: '#607a86',
-  
-  // 边框和分割线
-  borderColor: '#FFFFFF10',
-  borderLight: '#EEFFFF19',
-  
-  // 搜索和匹配
-  searchMatch: '#82AAFF',
-  matchingBracket: '#263238',
-}
+  dropdownBorder: '#ffffff10',
 
-// 使用通用主题工厂函数创建 Material Dark 主题
-export const materialDark: Extension = createBaseTheme(config)
+  foreground: '#eeffff',
+  foregroundSecondary: '#9fbac2',
+  cursor: '#ffcc00',
+  selection: '#80cbc420',
+  selectionBlur: '#80cbc420',
+  activeLine: '#4c616c22',
+  lineNumber: '#37474f',
+  activeLineNumber: '#607a86',
+  diffInserted: '#c3e88d',
+  diffDeleted: '#ff5370',
+  diffChanged: '#ffcb6b',
+  borderColor: '#ffffff10',
+  borderLight: '#eeffff19',
+  searchMatch: '#82aaff',
+  matchingBracket: '#263238',
+
+  comment: '#546e7a',
+  lineComment: '#4b606a',
+  blockComment: '#455962',
+  docComment: '#6c8795',
+  name: '#eeffff',
+  variableName: '#eeffff',
+  typeName: '#b2ccd6',
+  tagName: '#9ad4f5',
+  propertyName: '#e0f2ff',
+  attributeName: '#ffdcdc',
+  className: '#ffcb6b',
+  labelName: '#ffd17a',
+  namespace: '#8ad2e7',
+  macroName: '#82aaff',
+  literal: '#f78c6c',
+  string: '#c3e88d',
+  docString: '#d3f8a8',
+  character: '#ffe8c0',
+  attributeValue: '#ffd99f',
+  number: '#f78c6c',
+  integer: '#ff996e',
+  float: '#ffad80',
+  bool: '#ffd37d',
+  regexp: '#89ddff',
+  escape: '#66d9ff',
+  color: '#ffd492',
+  url: '#72d1ff',
+  keyword: '#c792ea',
+  self: '#d29ef2',
+  null: '#ff8aad',
+  atom: '#f78c6c',
+  unit: '#f78c6c',
+  modifier: '#dca8f0',
+  operatorKeyword: '#ca8de3',
+  controlKeyword: '#c280e1',
+  definitionKeyword: '#ce95ea',
+  moduleKeyword: '#d8a8f0',
+  operator: '#c792ea',
+  derefOperator: '#d79ef4',
+  arithmeticOperator: '#d28aec',
+  logicOperator: '#cd84e3',
+  bitwiseOperator: '#c77cdf',
+  compareOperator: '#cc8fe5',
+  updateOperator: '#c47ad9',
+  definitionOperator: '#bb6fd0',
+  typeOperator: '#cfa2ed',
+  controlOperator: '#b767cf',
+  punctuation: '#d9b4ff',
+  separator: '#d5aef6',
+  bracket: '#9fb6c5',
+  angleBracket: '#c4ddff',
+  squareBracket: '#a7c5dd',
+  paren: '#adc3d4',
+  brace: '#92aabd',
+  content: '#eeffff',
+  heading: '#c3e88d',
+  heading1: '#aeea9c',
+  heading2: '#a0dd92',
+  heading3: '#92d087',
+  heading4: '#85c37d',
+  heading5: '#78b673',
+  heading6: '#6aa969',
+  contentSeparator: '#c792ea',
+  list: '#b7cad4',
+  quote: '#758892',
+  emphasis: '#eeffff',
+  strong: '#f8ffff',
+  link: '#89ddff',
+  monospace: '#d7e4ec',
+  strikethrough: '#b4c4cc',
+  inserted: '#c3e88d',
+  deleted: '#ff5370',
+  changed: '#ffcb6b',
+  invalid: '#ff5370',
+  meta: '#6d8795',
+  documentMeta: '#648292',
+  annotation: '#73e0ff',
+  processingInstruction: '#617480',
+  definition: '#d0dae4',
+  constant: '#f78c6c',
+  function: '#82aaff',
+  standard: '#bacdd8',
+  local: '#c3d3dc',
+  special: '#ffd8a6',
+};
+
+export const materialDark: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/dark/one-dark.ts b/frontend/src/views/editor/theme/dark/one-dark.ts
index 9b53243..0879654 100644
--- a/frontend/src/views/editor/theme/dark/one-dark.ts
+++ b/frontend/src/views/editor/theme/dark/one-dark.ts
@@ -1,76 +1,132 @@
-import {Extension} from "@codemirror/state"
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
-// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
-
-const chalky = "#e5c07b",
-    coral = "#e06c75",
-    cyan = "#56b6c2",
-    invalid = "#ffffff",
-    ivory = "#abb2bf",
-    stone = "#7d8799", // Brightened compared to original to increase contrast
-    malibu = "#61afef",
-    sage = "#98c379",
-    whiskey = "#d19a66",
-    violet = "#c678dd",
-    darkBackground = "#21252b",
-    highlightBackground = "#313949FF",
-    background = "#282c34",
-    tooltipBackground = "#353a42",
-    selection = "#3E4451",
-    cursor = "#528bff"
+const chalky = '#e5c07b';
+const coral = '#e06c75';
+const cyan = '#56b6c2';
+const ivory = '#abb2bf';
+const stone = '#7d8799';
+const malibu = '#61afef';
+const sage = '#98c379';
+const whiskey = '#d19a66';
+const violet = '#c678dd';
+const darkBackground = '#21252b';
+const highlightBackground = '#313949ff';
+const background = '#282c34';
+const tooltipBackground = '#353a42';
+const selection = '#3e4451';
 
 export const config: ThemeColors = {
-  name: 'one-dark',
+  themeName: 'one-dark',
   dark: true,
-  
-  // 基础色调
-  background: background,
+
+  background,
   backgroundSecondary: highlightBackground,
   surface: tooltipBackground,
   dropdownBackground: darkBackground,
   dropdownBorder: stone,
-  
-  // 文本颜色
+
   foreground: ivory,
   foregroundSecondary: stone,
-  comment: stone,
-  
-  // 语法高亮色 - 核心
-  keyword: violet,
-  string: sage,
-  function: malibu,
-  number: chalky,
-  operator: cyan,
-  variable: coral,
-  type: chalky,
-  
-  // 语法高亮色 - 扩展
-  constant: whiskey,
-  storage: violet,
-  parameter: coral,
-  class: chalky,
-  heading: coral,
-  invalid: invalid,
-  regexp: cyan,
-  
-  // 界面元素
-  cursor: cursor,
-  selection: selection,
+  cursor: '#528bff',
+  selection,
   selectionBlur: selection,
   activeLine: '#6699ff0b',
   lineNumber: stone,
   activeLineNumber: ivory,
-  
-  // 边框和分割线
+  diffInserted: sage,
+  diffDeleted: coral,
+  diffChanged: whiskey,
   borderColor: darkBackground,
-  borderLight: ivory + '19',
-  
-  // 搜索和匹配
+  borderLight: `${ivory}19`,
   searchMatch: malibu,
   matchingBracket: '#bad0f847',
-}
 
-// 使用通用主题工厂函数创建 One Dark 主题
-export const oneDark: Extension = createBaseTheme(config)
\ No newline at end of file
+  comment: stone,
+  lineComment: '#6c7484',
+  blockComment: '#606775',
+  docComment: '#8b92a0',
+  name: ivory,
+  variableName: coral,
+  typeName: chalky,
+  tagName: '#e4c78f',
+  propertyName: '#d7dee8',
+  attributeName: '#efb8c2',
+  className: chalky,
+  labelName: '#f7b267',
+  namespace: '#88c0ff',
+  macroName: malibu,
+  literal: chalky,
+  string: sage,
+  docString: '#b3d899',
+  character: '#d9f59c',
+  attributeValue: '#f0c390',
+  number: chalky,
+  integer: '#f2c78d',
+  float: '#f1ba6a',
+  bool: '#f28f6a',
+  regexp: cyan,
+  escape: '#7fd5e9',
+  color: whiskey,
+  url: '#7dc7ff',
+  keyword: violet,
+  self: '#d98ae8',
+  null: '#ef8fa8',
+  atom: whiskey,
+  unit: '#fbd38a',
+  modifier: '#d391f2',
+  operatorKeyword: '#78c3d6',
+  controlKeyword: '#bf6edb',
+  definitionKeyword: '#d383e6',
+  moduleKeyword: '#a6c1ff',
+  operator: cyan,
+  derefOperator: '#72c1d3',
+  arithmeticOperator: '#6ab4ce',
+  logicOperator: '#6ccad7',
+  bitwiseOperator: '#4fa8c2',
+  compareOperator: '#64b9cc',
+  updateOperator: '#4299b8',
+  definitionOperator: '#398daf',
+  typeOperator: '#3fc4e2',
+  controlOperator: '#3f96b0',
+  punctuation: '#8eaac2',
+  separator: '#7a96b1',
+  bracket: '#b3bcc7',
+  angleBracket: '#cfd5dd',
+  squareBracket: '#96a2ae',
+  paren: '#7f8c97',
+  brace: '#9aa5af',
+  content: ivory,
+  heading: coral,
+  heading1: '#ffb19d',
+  heading2: '#ffa188',
+  heading3: '#ff9173',
+  heading4: '#ff825e',
+  heading5: '#ff7249',
+  heading6: '#ff6234',
+  contentSeparator: cyan,
+  list: '#9da7b4',
+  quote: '#8b94a4',
+  emphasis: ivory,
+  strong: '#f4f6f8',
+  link: malibu,
+  monospace: '#c2cad1',
+  strikethrough: '#9ea5b1',
+  inserted: sage,
+  deleted: coral,
+  changed: whiskey,
+  invalid: '#ffffff',
+  meta: '#96a1b4',
+  documentMeta: '#8a95a6',
+  annotation: '#84d0ff',
+  processingInstruction: '#7c889c',
+  definition: '#c9cfd8',
+  constant: whiskey,
+  function: malibu,
+  standard: '#aeb7c5',
+  local: '#b9c2ce',
+  special: '#f4d67a',
+};
+
+export const oneDark: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/dark/solarized-dark.ts b/frontend/src/views/editor/theme/dark/solarized-dark.ts
index 66959c7..b3d1927 100644
--- a/frontend/src/views/editor/theme/dark/solarized-dark.ts
+++ b/frontend/src/views/editor/theme/dark/solarized-dark.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'solarized-dark',
+  themeName: 'solarized-dark',
   dark: true,
-  
-  // 基础色调
-  background: '#002B36',
-  backgroundSecondary: '#003643FF',
-  surface: '#002B36',
-  dropdownBackground: '#002B36',
-  dropdownBorder: '#2AA19899',
-  
-  // 文本颜色
-  foreground: '#93A1A1',
-  foregroundSecondary: '#93A1A1',
-  comment: '#586E75',
-  
-  // 语法高亮色 - 核心
-  keyword: '#859900',
-  string: '#2AA198',
-  function: '#268BD2',
-  number: '#D33682',
-  operator: '#859900',
-  variable: '#268BD2',
-  type: '#CB4B16',
-  
-  // 语法高亮色 - 扩展
-  constant: '#CB4B16',
-  storage: '#93A1A1',
-  parameter: '#268BD2',
-  class: '#CB4B16',
-  heading: '#268BD2',
-  invalid: '#DC322F',
-  regexp: '#DC322F',
-  
-  // 界面元素
-  cursor: '#D30102',
+
+  background: '#002b36',
+  backgroundSecondary: '#003643',
+  surface: '#002b36',
+  dropdownBackground: '#002b36',
+  dropdownBorder: '#2aa19899',
+
+  foreground: '#fdf6e3',
+  foregroundSecondary: '#93a1a1',
+  cursor: '#d30102',
   selection: '#274642',
   selectionBlur: '#274642',
   activeLine: '#005b7022',
-  lineNumber: '#93A1A1',
+  lineNumber: '#93a1a1',
   activeLineNumber: '#949494',
-  
-  // 边框和分割线
+  diffInserted: '#859900',
+  diffDeleted: '#dc322f',
+  diffChanged: '#b58900',
   borderColor: '#073642',
-  borderLight: '#93A1A119',
-  
-  // 搜索和匹配
-  searchMatch: '#2AA198',
+  borderLight: '#93a1a119',
+  searchMatch: '#2aa198',
   matchingBracket: '#073642',
-}
 
-// 使用通用主题工厂函数创建 Solarized Dark 主题
-export const solarizedDark: Extension = createBaseTheme(config)
+  comment: '#586e75',
+  lineComment: '#4f646a',
+  blockComment: '#46595e',
+  docComment: '#7c8f94',
+  name: '#fdf6e3',
+  variableName: '#b58900',
+  typeName: '#2aa198',
+  tagName: '#2ab7a5',
+  propertyName: '#d7c8a1',
+  attributeName: '#f1c795',
+  className: '#b58900',
+  labelName: '#d7991f',
+  namespace: '#3ca8a0',
+  macroName: '#268bd2',
+  literal: '#d33682',
+  string: '#859900',
+  docString: '#9cc200',
+  character: '#b3dd00',
+  attributeValue: '#e1c272',
+  number: '#d33682',
+  integer: '#c0478a',
+  float: '#b03a79',
+  bool: '#ffcc4d',
+  regexp: '#2aa198',
+  escape: '#35bcb1',
+  color: '#d19100',
+  url: '#268bd2',
+  keyword: '#cb4b16',
+  self: '#e2572f',
+  null: '#ff6845',
+  atom: '#d33682',
+  unit: '#ad8100',
+  modifier: '#d96d22',
+  operatorKeyword: '#bc5822',
+  controlKeyword: '#c14a17',
+  definitionKeyword: '#de5c29',
+  moduleKeyword: '#d4975b',
+  operator: '#6c71c4',
+  derefOperator: '#8a78d8',
+  arithmeticOperator: '#7d6fd0',
+  logicOperator: '#8376d5',
+  bitwiseOperator: '#6a5dc3',
+  compareOperator: '#8171cd',
+  updateOperator: '#5d54b4',
+  definitionOperator: '#5f56b8',
+  typeOperator: '#379e9d',
+  controlOperator: '#5950a7',
+  punctuation: '#b1a6d2',
+  separator: '#a090c1',
+  bracket: '#cac5dc',
+  angleBracket: '#e4e1ee',
+  squareBracket: '#bdb6cf',
+  paren: '#aba5c0',
+  brace: '#c2bcd5',
+  content: '#fdf6e3',
+  heading: '#cb4b16',
+  heading1: '#e06c2c',
+  heading2: '#d95d1b',
+  heading3: '#c1500f',
+  heading4: '#b3450a',
+  heading5: '#a33805',
+  heading6: '#932c00',
+  contentSeparator: '#6c71c4',
+  list: '#c3b79f',
+  quote: '#8b968f',
+  emphasis: '#fdf6e3',
+  strong: '#fefaf0',
+  link: '#268bd2',
+  monospace: '#d6cfbd',
+  strikethrough: '#c4bba5',
+  inserted: '#859900',
+  deleted: '#dc322f',
+  changed: '#b58900',
+  invalid: '#dc322f',
+  meta: '#687b84',
+  documentMeta: '#5f7179',
+  annotation: '#2bb0cf',
+  processingInstruction: '#5a6b71',
+  definition: '#dacfb9',
+  constant: '#d33682',
+  function: '#268bd2',
+  standard: '#9bb1b0',
+  local: '#b4c3bb',
+  special: '#b58900',
+};
+
+export const solarizedDark: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts b/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts
index 1a38a56..c0a1199 100644
--- a/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts
+++ b/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'tokyo-night-storm',
+  themeName: 'tokyo-night-storm',
   dark: true,
-  
-  // 基础色调
+
   background: '#24283b',
-  backgroundSecondary: '#2B3151FF',
+  backgroundSecondary: '#2b3151',
   surface: '#24283b',
   dropdownBackground: '#24283b',
   dropdownBorder: '#7982a9',
-  
-  // 文本颜色
-  foreground: '#7982a9',
+
+  foreground: '#c0caf5',
   foregroundSecondary: '#7982a9',
-  comment: '#565f89',
-  
-  // 语法高亮色 - 核心
-  keyword: '#bb9af7',
-  string: '#9ece6a',
-  function: '#7aa2f7',
-  number: '#ff9e64',
-  operator: '#bb9af7',
-  variable: '#c0caf5',
-  type: '#2ac3de',
-  
-  // 语法高亮色 - 扩展
-  constant: '#bb9af7',
-  storage: '#bb9af7',
-  parameter: '#c0caf5',
-  class: '#c0caf5',
-  heading: '#89ddff',
-  invalid: '#ff5370',
-  regexp: '#b4f9f8',
-  
-  // 界面元素
   cursor: '#c0caf5',
   selection: '#6f7bb630',
   selectionBlur: '#6f7bb630',
   activeLine: '#4d547722',
   lineNumber: '#3b4261',
   activeLineNumber: '#737aa2',
-  
-  // 边框和分割线
+  diffInserted: '#9ece6a',
+  diffDeleted: '#f7768e',
+  diffChanged: '#ff9e64',
   borderColor: '#1f2335',
   borderLight: '#7982a919',
-  
-  // 搜索和匹配
   searchMatch: '#7aa2f7',
   matchingBracket: '#1f2335',
-}
 
-// 使用通用主题工厂函数创建 Tokyo Night Storm 主题
-export const tokyoNightStorm: Extension = createBaseTheme(config)
+  comment: '#565f89',
+  lineComment: '#4d567b',
+  blockComment: '#454e6f',
+  docComment: '#6f789b',
+  name: '#c0caf5',
+  variableName: '#c0caf5',
+  typeName: '#2ac3de',
+  tagName: '#5ad4e9',
+  propertyName: '#cfd4ed',
+  attributeName: '#f2bde1',
+  className: '#8fb7ff',
+  labelName: '#ffc28b',
+  namespace: '#3cd4e9',
+  macroName: '#7aa2f7',
+  literal: '#ff9e64',
+  string: '#9ece6a',
+  docString: '#abd88a',
+  character: '#cff7a8',
+  attributeValue: '#f8cda5',
+  number: '#ff9e64',
+  integer: '#ffae7d',
+  float: '#ffa467',
+  bool: '#ffbf75',
+  regexp: '#b4f9f8',
+  escape: '#91f1ff',
+  color: '#ffb782',
+  url: '#7aa2f7',
+  keyword: '#bb9af7',
+  self: '#d8a2ff',
+  null: '#ff96be',
+  atom: '#ff9e64',
+  unit: '#f7d38a',
+  modifier: '#dab5ff',
+  operatorKeyword: '#d0b2ff',
+  controlKeyword: '#ce9cff',
+  definitionKeyword: '#dcbaff',
+  moduleKeyword: '#aab8ff',
+  operator: '#bb9af7',
+  derefOperator: '#d2a7ff',
+  arithmeticOperator: '#cda0ff',
+  logicOperator: '#b78fff',
+  bitwiseOperator: '#a179f0',
+  compareOperator: '#b984ff',
+  updateOperator: '#a071f1',
+  definitionOperator: '#9366e3',
+  typeOperator: '#3ed2f2',
+  controlOperator: '#8a61f6',
+  punctuation: '#9da7cd',
+  separator: '#8f9abc',
+  bracket: '#afb6cb',
+  angleBracket: '#cad1e3',
+  squareBracket: '#959bb3',
+  paren: '#828aa4',
+  brace: '#96a0b8',
+  content: '#c0caf5',
+  heading: '#89ddff',
+  heading1: '#9fe2ff',
+  heading2: '#8bd9ff',
+  heading3: '#77d0ff',
+  heading4: '#63c7ff',
+  heading5: '#4fbeff',
+  heading6: '#3bb5ff',
+  contentSeparator: '#bb9af7',
+  list: '#858caa',
+  quote: '#5f6583',
+  emphasis: '#c0caf5',
+  strong: '#e7ebff',
+  link: '#7aa2f7',
+  monospace: '#a8aac1',
+  strikethrough: '#7f85a5',
+  inserted: '#9ece6a',
+  deleted: '#f7768e',
+  changed: '#ff9e64',
+  invalid: '#ff5370',
+  meta: '#656c90',
+  documentMeta: '#5c6381',
+  annotation: '#8df1ff',
+  processingInstruction: '#545975',
+  definition: '#bcc3df',
+  constant: '#ff9e64',
+  function: '#7aa2f7',
+  standard: '#8e9ac0',
+  local: '#98a2c8',
+  special: '#ffc68a',
+};
+
+export const tokyoNightStorm: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/dark/tokyo-night.ts b/frontend/src/views/editor/theme/dark/tokyo-night.ts
index 01ac03f..f140116 100644
--- a/frontend/src/views/editor/theme/dark/tokyo-night.ts
+++ b/frontend/src/views/editor/theme/dark/tokyo-night.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'tokyo-night',
+  themeName: 'tokyo-night',
   dark: true,
-  
-  // 基础色调
+
   background: '#1a1b26',
-  backgroundSecondary: '#272839FF',
+  backgroundSecondary: '#272839',
   surface: '#1a1b26',
   dropdownBackground: '#1a1b26',
   dropdownBorder: '#787c99',
-  
-  // 文本颜色
-  foreground: '#787c99',
+
+  foreground: '#c0caf5',
   foregroundSecondary: '#787c99',
-  comment: '#444b6a',
-  
-  // 语法高亮色 - 核心
-  keyword: '#bb9af7',
-  string: '#9ece6a',
-  function: '#7aa2f7',
-  number: '#ff9e64',
-  operator: '#bb9af7',
-  variable: '#c0caf5',
-  type: '#0db9d7',
-  
-  // 语法高亮色 - 扩展
-  constant: '#bb9af7',
-  storage: '#bb9af7',
-  parameter: '#c0caf5',
-  class: '#c0caf5',
-  heading: '#89ddff',
-  invalid: '#ff5370',
-  regexp: '#b4f9f8',
-  
-  // 界面元素
   cursor: '#c0caf5',
   selection: '#515c7e40',
   selectionBlur: '#515c7e40',
   activeLine: '#43455c22',
   lineNumber: '#363b54',
   activeLineNumber: '#737aa2',
-  
-  // 边框和分割线
+  diffInserted: '#9ece6a',
+  diffDeleted: '#f7768e',
+  diffChanged: '#ff9e64',
   borderColor: '#16161e',
   borderLight: '#787c9919',
-  
-  // 搜索和匹配
   searchMatch: '#7aa2f7',
   matchingBracket: '#16161e',
-}
 
-// 使用通用主题工厂函数创建 Tokyo Night 主题
-export const tokyoNight: Extension = createBaseTheme(config)
+  comment: '#444b6a',
+  lineComment: '#3d4360',
+  blockComment: '#373d55',
+  docComment: '#5a6084',
+  name: '#c0caf5',
+  variableName: '#c0caf5',
+  typeName: '#0db9d7',
+  tagName: '#68dce9',
+  propertyName: '#d0d5f0',
+  attributeName: '#f0b7d7',
+  className: '#7aa2f7',
+  labelName: '#ffbd82',
+  namespace: '#38c5d9',
+  macroName: '#7aa2f7',
+  literal: '#ff9e64',
+  string: '#9ece6a',
+  docString: '#adda7d',
+  character: '#d7f5a2',
+  attributeValue: '#f6c299',
+  number: '#ff9e64',
+  integer: '#ffae7d',
+  float: '#ffa467',
+  bool: '#ffb86c',
+  regexp: '#b4f9f8',
+  escape: '#8df0f0',
+  color: '#ff9e64',
+  url: '#7aa2f7',
+  keyword: '#bb9af7',
+  self: '#d0a0ff',
+  null: '#ff90b2',
+  atom: '#ff9e64',
+  unit: '#fbd38a',
+  modifier: '#d6b4ff',
+  operatorKeyword: '#ccabff',
+  controlKeyword: '#c89cff',
+  definitionKeyword: '#d6baff',
+  moduleKeyword: '#9fb3ff',
+  operator: '#bb9af7',
+  derefOperator: '#c7a3ff',
+  arithmeticOperator: '#c39aff',
+  logicOperator: '#b08eff',
+  bitwiseOperator: '#9b78f0',
+  compareOperator: '#ae9bf5',
+  updateOperator: '#9a82e7',
+  definitionOperator: '#8b75d7',
+  typeOperator: '#3fc4e2',
+  controlOperator: '#9266f2',
+  punctuation: '#98a1c3',
+  separator: '#8b93b4',
+  bracket: '#a4acc6',
+  angleBracket: '#c1c8df',
+  squareBracket: '#8e96b5',
+  paren: '#7a83a3',
+  brace: '#8f98b5',
+  content: '#c0caf5',
+  heading: '#89ddff',
+  heading1: '#9ce9ff',
+  heading2: '#88dfff',
+  heading3: '#74d5ff',
+  heading4: '#60cbff',
+  heading5: '#4cc1ff',
+  heading6: '#38b7ff',
+  contentSeparator: '#bb9af7',
+  list: '#7d849f',
+  quote: '#5d6382',
+  emphasis: '#c0caf5',
+  strong: '#e6e9ff',
+  link: '#7aa2f7',
+  monospace: '#a9aac0',
+  strikethrough: '#7f8399',
+  inserted: '#9ece6a',
+  deleted: '#f7768e',
+  changed: '#ff9e64',
+  invalid: '#ff5370',
+  meta: '#61678b',
+  documentMeta: '#585d7c',
+  annotation: '#8cf5ff',
+  processingInstruction: '#525670',
+  definition: '#bfc6e4',
+  constant: '#ff9e64',
+  function: '#7aa2f7',
+  standard: '#8490b3',
+  local: '#909abf',
+  special: '#ffb347',
+};
+
+export const tokyoNight: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/light/default-light.ts b/frontend/src/views/editor/theme/light/default-light.ts
index acaadce..04773b1 100644
--- a/frontend/src/views/editor/theme/light/default-light.ts
+++ b/frontend/src/views/editor/theme/light/default-light.ts
@@ -1,63 +1,118 @@
 import {createBaseTheme} from '../base';
 import type {ThemeColors} from '../types';
 
-// 默认浅色主题颜色
 export const defaultLightColors: ThemeColors = {
-    // 主题信息
-    name: 'default-light',
+    themeName: 'default-light',
     dark: false,
 
-    // 基础色调
-    background: '#ffffff',        // 主背景色
-    backgroundSecondary: '#f1faf1', // 次要背景色
-    surface: '#f5f5f5',           // 面板背景
-    dropdownBackground: '#ffffff', // 下拉菜单背景
-    dropdownBorder: '#e1e4e8',    // 下拉菜单边框
+    background: '#ffffff',
+    backgroundSecondary: '#f4f7fb',
+    surface: '#f7f8f9',
+    dropdownBackground: '#ffffff',
+    dropdownBorder: '#e1e4e8',
 
-    // 文本颜色
-    foreground: '#444d56',        // 主文本色
-    foregroundSecondary: '#6a737d', // 次要文本色
-    comment: '#6a737d',           // 注释色
+    foreground: '#24292e',
+    foregroundSecondary: '#6a737d',
+    cursor: '#000000',
+    selection: '#77baff',
+    selectionBlur: '#c4d4df',
+    activeLine: '#0000000a',
+    lineNumber: '#00000040',
+    activeLineNumber: '#000000aa',
+    diffInserted: '#2da44e',
+    diffDeleted: '#d73a49',
+    diffChanged: '#c69026',
+    borderColor: '#d8dee4',
+    borderLight: '#0000000c',
+    searchMatch: '#1f6feb',
+    matchingBracket: '#00000019',
 
-    // 语法高亮色 - 核心
-    keyword: '#d73a49',           // 关键字
-    string: '#032f62',            // 字符串
-    function: '#005cc5',          // 函数名
-    number: '#005cc5',            // 数字
-    operator: '#d73a49',          // 操作符
-    variable: '#24292e',          // 变量
-    type: '#6f42c1',             // 类型
-
-    // 语法高亮色 - 扩展
-    constant: '#005cc5',          // 常量
-    storage: '#d73a49',           // 存储类型
-    parameter: '#24292e',         // 参数
-    class: '#6f42c1',             // 类名
-    heading: '#d73a49',           // 标题
-    invalid: '#cb2431',           // 无效内容
-    regexp: '#032f62',            // 正则表达式
-
-    // 界面元素
-    cursor: '#000000',            // 光标
-    selection: '#77baff',         // 选中背景
-    selectionBlur: '#b2c2ca',     // 失焦选中背景
-    activeLine: '#0000000a',      // 当前行高亮
-    lineNumber: '#00000040',      // 行号
-    activeLineNumber: '#000000aa', // 活动行号
-
-    // 边框和分割线
-    borderColor: '#dfdfdf',       // 边框色
-    borderLight: '#0000000c',     // 浅色边框
-
-    // 搜索和匹配
-    searchMatch: '#005cc5',       // 搜索匹配
-    matchingBracket: '#00000019', // 匹配括号
+    comment: '#6a737d',
+    lineComment: '#808a95',
+    blockComment: '#5c646f',
+    docComment: '#909ba8',
+    name: '#1f2329',
+    variableName: '#27313c',
+    typeName: '#5b32c2',
+    tagName: '#3d60c9',
+    propertyName: '#384252',
+    attributeName: '#7c3aed',
+    className: '#4c3ad7',
+    labelName: '#975400',
+    namespace: '#2f6f9f',
+    macroName: '#ae5f00',
+    literal: '#0b5cc5',
+    string: '#032f62',
+    docString: '#0a477f',
+    character: '#174f92',
+    attributeValue: '#8c4f00',
+    number: '#0f65c9',
+    integer: '#0075d6',
+    float: '#0086e6',
+    bool: '#b7410e',
+    regexp: '#2362a1',
+    escape: '#3383c5',
+    color: '#db6e00',
+    url: '#005cc5',
+    keyword: '#d73a49',
+    self: '#b92548',
+    null: '#be1347',
+    atom: '#8241c1',
+    unit: '#a75500',
+    modifier: '#c9245d',
+    operatorKeyword: '#c23143',
+    controlKeyword: '#bf213a',
+    definitionKeyword: '#d45563',
+    moduleKeyword: '#c2476a',
+    operator: '#c93a56',
+    derefOperator: '#cf4c67',
+    arithmeticOperator: '#c82a57',
+    logicOperator: '#c23a5e',
+    bitwiseOperator: '#c23f4d',
+    compareOperator: '#c9455b',
+    updateOperator: '#c2304d',
+    definitionOperator: '#ca3c6b',
+    typeOperator: '#a642d9',
+    controlOperator: '#bd3552',
+    punctuation: '#a37a00',
+    separator: '#a87700',
+    bracket: '#7c8ba1',
+    angleBracket: '#7a9fbd',
+    squareBracket: '#99a7c3',
+    paren: '#5c6e90',
+    brace: '#8d96a8',
+    content: '#1f2329',
+    heading: '#b35900',
+    heading1: '#b04a00',
+    heading2: '#b55e00',
+    heading3: '#b96f00',
+    heading4: '#bb7c00',
+    heading5: '#be8900',
+    heading6: '#c29500',
+    contentSeparator: '#c4b200',
+    list: '#566266',
+    quote: '#7c858f',
+    emphasis: '#1f2329',
+    strong: '#111217',
+    link: '#0a58ca',
+    monospace: '#3a434f',
+    strikethrough: '#5d6469',
+    inserted: '#2da44e',
+    deleted: '#d73a49',
+    changed: '#c69026',
+    invalid: '#cb2431',
+    meta: '#4c5a6b',
+    documentMeta: '#5e6977',
+    annotation: '#7f4cd6',
+    processingInstruction: '#4f5b63',
+    definition: '#30404d',
+    constant: '#0b5cc5',
+    function: '#005cc5',
+    standard: '#40566b',
+    local: '#2f3944',
+    special: '#a44500',
 };
 
-// 创建浅色主题
 export function createLightTheme(colors: ThemeColors = defaultLightColors) {
     return createBaseTheme({...colors, dark: false});
 }
-
-// 默认浅色主题
-export const defaultLight = createLightTheme(defaultLightColors);
\ No newline at end of file
diff --git a/frontend/src/views/editor/theme/light/github-light.ts b/frontend/src/views/editor/theme/light/github-light.ts
index 376be4a..628e53b 100644
--- a/frontend/src/views/editor/theme/light/github-light.ts
+++ b/frontend/src/views/editor/theme/light/github-light.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'github-light',
+  themeName: 'github-light',
   dark: false,
-  
-  // 基础色调
-  background: '#fff',
+
+  background: '#ffffff',
   backgroundSecondary: '#f1faf1',
-  surface: '#fff',
-  dropdownBackground: '#fff',
+  surface: '#ffffff',
+  dropdownBackground: '#ffffff',
   dropdownBorder: '#e1e4e8',
-  
-  // 文本颜色
+
   foreground: '#444d56',
-  foregroundSecondary: '#444d56',
-  comment: '#6a737d',
-  
-  // 语法高亮色 - 核心
-  keyword: '#d73a49',
-  string: '#032f62',
-  function: '#005cc5',
-  number: '#005cc5',
-  operator: '#d73a49',
-  variable: '#e36209',
-  type: '#005cc5',
-  
-  // 语法高亮色 - 扩展
-  constant: '#005cc5',
-  storage: '#d73a49',
-  parameter: '#24292e',
-  class: '#6f42c1',
-  heading: '#005cc5',
-  invalid: '#cb2431',
-  regexp: '#032f62',
-  
-  // 界面元素
+  foregroundSecondary: '#6a737d',
   cursor: '#044289',
   selection: '#0366d625',
   selectionBlur: '#0366d625',
   activeLine: '#c6c6c622',
   lineNumber: '#1b1f234d',
   activeLineNumber: '#24292e',
-  
-  // 边框和分割线
+  diffInserted: '#2ea043',
+  diffDeleted: '#cb2431',
+  diffChanged: '#f2cc60',
   borderColor: '#e1e4e8',
   borderLight: '#444d5619',
-  
-  // 搜索和匹配
   searchMatch: '#005cc5',
   matchingBracket: '#34d05840',
-}
 
-// 使用通用主题工厂函数创建 GitHub Light 主题
-export const githubLight: Extension = createBaseTheme(config)
+  comment: '#6a737d',
+  lineComment: '#5e6873',
+  blockComment: '#4f5864',
+  docComment: '#7a828c',
+  name: '#444d56',
+  variableName: '#e36209',
+  typeName: '#005cc5',
+  tagName: '#0b5cbf',
+  propertyName: '#5c6670',
+  attributeName: '#a34f8b',
+  className: '#6f42c1',
+  labelName: '#e36209',
+  namespace: '#1667c1',
+  macroName: '#005cc5',
+  literal: '#005cc5',
+  string: '#032f62',
+  docString: '#1a4a7d',
+  character: '#205893',
+  attributeValue: '#ad6f2c',
+  number: '#005cc5',
+  integer: '#0a4cb0',
+  float: '#0c58c6',
+  bool: '#b08800',
+  regexp: '#032f62',
+  escape: '#0a7dd6',
+  color: '#bf7a0f',
+  url: '#005cc5',
+  keyword: '#d73a49',
+  self: '#f14e6f',
+  null: '#d73a49',
+  atom: '#005cc5',
+  unit: '#a07400',
+  modifier: '#e36209',
+  operatorKeyword: '#cc3745',
+  controlKeyword: '#c2303d',
+  definitionKeyword: '#de4f5d',
+  moduleKeyword: '#9c4fd8',
+  operator: '#d73a49',
+  derefOperator: '#c02c3a',
+  arithmeticOperator: '#b02834',
+  logicOperator: '#b83341',
+  bitwiseOperator: '#9a2334',
+  compareOperator: '#c1343f',
+  updateOperator: '#a8282f',
+  definitionOperator: '#99212c',
+  typeOperator: '#1c8198',
+  controlOperator: '#882033',
+  punctuation: '#c3a5d5',
+  separator: '#bf9fcf',
+  bracket: '#97a3bf',
+  angleBracket: '#bcc7dd',
+  squareBracket: '#9aa6bf',
+  paren: '#7d889f',
+  brace: '#a8b2c6',
+  content: '#444d56',
+  heading: '#005cc5',
+  heading1: '#2a72c7',
+  heading2: '#2665b5',
+  heading3: '#2158a3',
+  heading4: '#1c4b91',
+  heading5: '#173e7f',
+  heading6: '#12316d',
+  contentSeparator: '#d73a49',
+  list: '#9aa2ad',
+  quote: '#7a828c',
+  emphasis: '#444d56',
+  strong: '#1b1f23',
+  link: '#005cc5',
+  monospace: '#6a737d',
+  strikethrough: '#737b84',
+  inserted: '#2ea043',
+  deleted: '#cb2431',
+  changed: '#f2cc60',
+  invalid: '#cb2431',
+  meta: '#5f6a74',
+  documentMeta: '#57606a',
+  annotation: '#0b7bbd',
+  processingInstruction: '#4d5860',
+  definition: '#7a848f',
+  constant: '#005cc5',
+  function: '#005cc5',
+  standard: '#5a646d',
+  local: '#6c757f',
+  special: '#b08800',
+};
+
+export const githubLight: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/light/material-light.ts b/frontend/src/views/editor/theme/light/material-light.ts
index a3cd49b..979aa30 100644
--- a/frontend/src/views/editor/theme/light/material-light.ts
+++ b/frontend/src/views/editor/theme/light/material-light.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'material-light',
+  themeName: 'material-light',
   dark: false,
-  
-  // 基础色调
-  background: '#FAFAFA',
-  backgroundSecondary: '#f1faf1',
-  surface: '#FAFAFA',
-  dropdownBackground: '#FAFAFA',
-  dropdownBorder: '#00000010',
-  
-  // 文本颜色
-  foreground: '#90A4AE',
-  foregroundSecondary: '#90A4AE',
-  comment: '#90A4AE',
-  
-  // 语法高亮色 - 核心
-  keyword: '#7C4DFF',
-  string: '#91B859',
-  function: '#6182B8',
-  number: '#F76D47',
-  operator: '#7C4DFF',
-  variable: '#90A4AE',
-  type: '#8796B0',
-  
-  // 语法高亮色 - 扩展
-  constant: '#F76D47',
-  storage: '#7C4DFF',
-  parameter: '#90A4AE',
-  class: '#FFB62C',
-  heading: '#91B859',
-  invalid: '#E53935',
-  regexp: '#39ADB5',
-  
-  // 界面元素
-  cursor: '#272727',
-  selection: '#80CBC440',
-  selectionBlur: '#80CBC440',
-  activeLine: '#c2c2c222',
-  lineNumber: '#CFD8DC',
-  activeLineNumber: '#7E939E',
-  
-  // 边框和分割线
-  borderColor: '#00000010',
-  borderLight: '#90A4AE19',
-  
-  // 搜索和匹配
-  searchMatch: '#6182B8',
-  matchingBracket: '#FAFAFA',
-}
 
-// 使用通用主题工厂函数创建 Material Light 主题
-export const materialLight: Extension = createBaseTheme(config)
+  background: '#fafafa',
+  backgroundSecondary: '#f1faf1',
+  surface: '#fafafa',
+  dropdownBackground: '#fafafa',
+  dropdownBorder: '#00000010',
+
+  foreground: '#90a4ae',
+  foregroundSecondary: '#7e939e',
+  cursor: '#272727',
+  selection: '#80cbc440',
+  selectionBlur: '#80cbc440',
+  activeLine: '#c2c2c222',
+  lineNumber: '#cfd8dc',
+  activeLineNumber: '#7e939e',
+  diffInserted: '#91b859',
+  diffDeleted: '#e53935',
+  diffChanged: '#ffcb6b',
+  borderColor: '#00000010',
+  borderLight: '#90a4ae19',
+  searchMatch: '#6182b8',
+  matchingBracket: '#fafafa',
+
+  comment: '#90a4ae',
+  lineComment: '#8598a3',
+  blockComment: '#788b97',
+  docComment: '#a3b6c1',
+  name: '#90a4ae',
+  variableName: '#90a4ae',
+  typeName: '#8796b0',
+  tagName: '#8ab0c7',
+  propertyName: '#bcccd5',
+  attributeName: '#ffb7c5',
+  className: '#ffb62c',
+  labelName: '#f78c6c',
+  namespace: '#61bcd2',
+  macroName: '#6182b8',
+  literal: '#f76d47',
+  string: '#91b859',
+  docString: '#a2cf6e',
+  character: '#cbe58f',
+  attributeValue: '#f7c493',
+  number: '#f76d47',
+  integer: '#f88760',
+  float: '#ff9a73',
+  bool: '#caa840',
+  regexp: '#39adb5',
+  escape: '#5ed1ce',
+  color: '#f4a35d',
+  url: '#4c91d6',
+  keyword: '#7c4dff',
+  self: '#9f77ff',
+  null: '#c9495f',
+  atom: '#f76d47',
+  unit: '#cf7a44',
+  modifier: '#a07ffe',
+  operatorKeyword: '#9c7bff',
+  controlKeyword: '#8a66ff',
+  definitionKeyword: '#a782ff',
+  moduleKeyword: '#6c89ff',
+  operator: '#7c4dff',
+  derefOperator: '#a07cfe',
+  arithmeticOperator: '#916dff',
+  logicOperator: '#9c74ff',
+  bitwiseOperator: '#7a5bdd',
+  compareOperator: '#8b64ef',
+  updateOperator: '#6f4ecf',
+  definitionOperator: '#6a4bc7',
+  typeOperator: '#5bbbd2',
+  controlOperator: '#6244b5',
+  punctuation: '#a2b3c0',
+  separator: '#94a3b0',
+  bracket: '#c2cad0',
+  angleBracket: '#dee5eb',
+  squareBracket: '#b8c1c7',
+  paren: '#a5aebb',
+  brace: '#bcc4ce',
+  content: '#90a4ae',
+  heading: '#91b859',
+  heading1: '#a5cf6c',
+  heading2: '#9bc261',
+  heading3: '#92b656',
+  heading4: '#89a94c',
+  heading5: '#809d41',
+  heading6: '#779136',
+  contentSeparator: '#7c4dff',
+  list: '#a6b4bb',
+  quote: '#7c8a91',
+  emphasis: '#90a4ae',
+  strong: '#3e4a52',
+  link: '#6182b8',
+  monospace: '#b7c4cc',
+  strikethrough: '#98a5ad',
+  inserted: '#91b859',
+  deleted: '#e53935',
+  changed: '#ffcb6b',
+  invalid: '#e53935',
+  meta: '#8ca0a9',
+  documentMeta: '#7e9099',
+  annotation: '#58d3e6',
+  processingInstruction: '#6d7e87',
+  definition: '#c7d2d6',
+  constant: '#f76d47',
+  function: '#6182b8',
+  standard: '#a5b2b8',
+  local: '#b3c0c7',
+  special: '#ffb62c',
+};
+
+export const materialLight: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/light/solarized-light.ts b/frontend/src/views/editor/theme/light/solarized-light.ts
index f8e8596..ec2003a 100644
--- a/frontend/src/views/editor/theme/light/solarized-light.ts
+++ b/frontend/src/views/editor/theme/light/solarized-light.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'solarized-light',
+  themeName: 'solarized-light',
   dark: false,
-  
-  // 基础色调
-  background: '#FDF6E3',
-  backgroundSecondary: '#FFEEBCD4',
-  surface: '#FDF6E3',
-  dropdownBackground: '#FDF6E3',
-  dropdownBorder: '#D3AF86',
-  
-  // 文本颜色
-  foreground: '#586E75',
-  foregroundSecondary: '#586E75',
-  comment: '#93A1A1',
-  
-  // 语法高亮色 - 核心
-  keyword: '#859900',
-  string: '#2AA198',
-  function: '#268BD2',
-  number: '#D33682',
-  operator: '#859900',
-  variable: '#268BD2',
-  type: '#CB4B16',
-  
-  // 语法高亮色 - 扩展
-  constant: '#CB4B16',
-  storage: '#586E75',
-  parameter: '#268BD2',
-  class: '#CB4B16',
-  heading: '#268BD2',
-  invalid: '#DC322F',
-  regexp: '#DC322F',
-  
-  // 界面元素
-  cursor: '#657B83',
-  selection: '#EEE8D5',
-  selectionBlur: '#EEE8D5',
-  activeLine: '#d5bd5c22',
-  lineNumber: '#586E75',
-  activeLineNumber: '#567983',
-  
-  // 边框和分割线
-  borderColor: '#EEE8D5',
-  borderLight: '#586E7519',
-  
-  // 搜索和匹配
-  searchMatch: '#268BD2',
-  matchingBracket: '#EEE8D5',
-}
 
-// 使用通用主题工厂函数创建 Solarized Light 主题
-export const solarizedLight: Extension = createBaseTheme(config)
+  background: '#fdf6e3',
+  backgroundSecondary: '#ffeeccd4',
+  surface: '#fdf6e3',
+  dropdownBackground: '#fdf6e3',
+  dropdownBorder: '#d3af86',
+
+  foreground: '#586e75',
+  foregroundSecondary: '#93a1a1',
+  cursor: '#657b83',
+  selection: '#eee8d5',
+  selectionBlur: '#eee8d5',
+  activeLine: '#d5bd5c22',
+  lineNumber: '#586e75',
+  activeLineNumber: '#567983',
+  diffInserted: '#2aa198',
+  diffDeleted: '#dc322f',
+  diffChanged: '#b58900',
+  borderColor: '#eee8d5',
+  borderLight: '#586e7519',
+  searchMatch: '#268bd2',
+  matchingBracket: '#eee8d5',
+
+  comment: '#93a1a1',
+  lineComment: '#82939d',
+  blockComment: '#7a8b95',
+  docComment: '#a5b6be',
+  name: '#586e75',
+  variableName: '#268bd2',
+  typeName: '#cb4b16',
+  tagName: '#2cbeb1',
+  propertyName: '#b3baba',
+  attributeName: '#d4835a',
+  className: '#cb4b16',
+  labelName: '#c98c0d',
+  namespace: '#3bb3ae',
+  macroName: '#268bd2',
+  literal: '#d33682',
+  string: '#2aa198',
+  docString: '#23b1a2',
+  character: '#4bd2c7',
+  attributeValue: '#c09a53',
+  number: '#d33682',
+  integer: '#c74a78',
+  float: '#b93d6b',
+  bool: '#b58900',
+  regexp: '#2aa198',
+  escape: '#3ad1c5',
+  color: '#cb4b16',
+  url: '#268bd2',
+  keyword: '#859900',
+  self: '#97aa06',
+  null: '#bf5f00',
+  atom: '#cb4b16',
+  unit: '#a57300',
+  modifier: '#a1871e',
+  operatorKeyword: '#76860a',
+  controlKeyword: '#7d9509',
+  definitionKeyword: '#7ba600',
+  moduleKeyword: '#5e9d76',
+  operator: '#859900',
+  derefOperator: '#9daa22',
+  arithmeticOperator: '#8c9b19',
+  logicOperator: '#85a612',
+  bitwiseOperator: '#6a7e0a',
+  compareOperator: '#7da811',
+  updateOperator: '#63740a',
+  definitionOperator: '#5f6c08',
+  typeOperator: '#2aa198',
+  controlOperator: '#586e0b',
+  punctuation: '#9db3ae',
+  separator: '#8c9f96',
+  bracket: '#cad2c9',
+  angleBracket: '#e3e8e0',
+  squareBracket: '#b7bfb7',
+  paren: '#939c93',
+  brace: '#c2c9c1',
+  content: '#586e75',
+  heading: '#268bd2',
+  heading1: '#3fb7d4',
+  heading2: '#36abc8',
+  heading3: '#2d9fbc',
+  heading4: '#2493b0',
+  heading5: '#1b87a4',
+  heading6: '#127b98',
+  contentSeparator: '#859900',
+  list: '#a7a591',
+  quote: '#8f9b8e',
+  emphasis: '#586e75',
+  strong: '#657b83',
+  link: '#268bd2',
+  monospace: '#c8c2b4',
+  strikethrough: '#bab29d',
+  inserted: '#2aa198',
+  deleted: '#dc322f',
+  changed: '#b58900',
+  invalid: '#dc322f',
+  meta: '#7d8b8f',
+  documentMeta: '#758288',
+  annotation: '#3ab4c3',
+  processingInstruction: '#6a7377',
+  definition: '#bcc7c0',
+  constant: '#cb4b16',
+  function: '#268bd2',
+  standard: '#8da1a0',
+  local: '#9eb1ac',
+  special: '#b58900',
+};
+
+export const solarizedLight: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/light/tokyo-night-day.ts b/frontend/src/views/editor/theme/light/tokyo-night-day.ts
index a6978b1..20be53e 100644
--- a/frontend/src/views/editor/theme/light/tokyo-night-day.ts
+++ b/frontend/src/views/editor/theme/light/tokyo-night-day.ts
@@ -1,57 +1,117 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'tokyo-night-day',
+  themeName: 'tokyo-night-day',
   dark: false,
-  
-  // 基础色调
+
   background: '#e1e2e7',
-  backgroundSecondary: '#D2D8EFFF',
+  backgroundSecondary: '#d2d8ef',
   surface: '#e1e2e7',
   dropdownBackground: '#e1e2e7',
   dropdownBorder: '#6a6f8e',
-  
-  // 文本颜色
+
   foreground: '#6a6f8e',
-  foregroundSecondary: '#6a6f8e',
-  comment: '#9da3c2',
-  
-  // 语法高亮色 - 核心
-  keyword: '#9854f1',
-  string: '#587539',
-  function: '#2e7de9',
-  number: '#b15c00',
-  operator: '#9854f1',
-  variable: '#3760bf',
-  type: '#07879d',
-  
-  // 语法高亮色 - 扩展
-  constant: '#9854f1',
-  storage: '#9854f1',
-  parameter: '#3760bf',
-  class: '#3760bf',
-  heading: '#006a83',
-  invalid: '#ff3e64',
-  regexp: '#2e5857',
-  
-  // 界面元素
+  foregroundSecondary: '#9da3c2',
   cursor: '#3760bf',
   selection: '#8591b840',
   selectionBlur: '#8591b840',
   activeLine: '#a7aaba22',
   lineNumber: '#b3b6cd',
   activeLineNumber: '#68709a',
-  
-  // 边框和分割线
+  diffInserted: '#587539',
+  diffDeleted: '#ff3e64',
+  diffChanged: '#b15c00',
   borderColor: '#e9e9ec',
   borderLight: '#6a6f8e19',
-  
-  // 搜索和匹配
   searchMatch: '#2e7de9',
   matchingBracket: '#e9e9ec',
-}
 
-// 使用通用主题工厂函数创建 Tokyo Night Day 主题
-export const tokyoNightDay: Extension = createBaseTheme(config)
+  comment: '#9da3c2',
+  lineComment: '#8b90a8',
+  blockComment: '#7e849d',
+  docComment: '#aeb3cb',
+  name: '#6a6f8e',
+  variableName: '#3760bf',
+  typeName: '#07879d',
+  tagName: '#4d8cff',
+  propertyName: '#8fa3d2',
+  attributeName: '#df8fb0',
+  className: '#4a71d6',
+  labelName: '#c37300',
+  namespace: '#3c99c0',
+  macroName: '#2e7de9',
+  literal: '#b15c00',
+  string: '#587539',
+  docString: '#4f8646',
+  character: '#79a058',
+  attributeValue: '#d28e43',
+  number: '#b15c00',
+  integer: '#d77500',
+  float: '#c36800',
+  bool: '#c79200',
+  regexp: '#2e5857',
+  escape: '#2c6f68',
+  color: '#c06f0f',
+  url: '#2e7de9',
+  keyword: '#9854f1',
+  self: '#c277ff',
+  null: '#ff5c7f',
+  atom: '#9854f1',
+  unit: '#ba6a00',
+  modifier: '#b16fff',
+  operatorKeyword: '#b67bff',
+  controlKeyword: '#ad68ff',
+  definitionKeyword: '#be84ff',
+  moduleKeyword: '#8f7dff',
+  operator: '#9854f1',
+  derefOperator: '#bb7fff',
+  arithmeticOperator: '#b173ff',
+  logicOperator: '#a369ff',
+  bitwiseOperator: '#8d59f0',
+  compareOperator: '#a673ff',
+  updateOperator: '#8c57dd',
+  definitionOperator: '#8150d3',
+  typeOperator: '#0aa5b5',
+  controlOperator: '#7741ca',
+  punctuation: '#9aa3c9',
+  separator: '#8f98be',
+  bracket: '#b5bdd6',
+  angleBracket: '#d8def0',
+  squareBracket: '#adb5cb',
+  paren: '#939ab7',
+  brace: '#b1b7cb',
+  content: '#6a6f8e',
+  heading: '#006a83',
+  heading1: '#0083a3',
+  heading2: '#007796',
+  heading3: '#006a89',
+  heading4: '#005e7c',
+  heading5: '#00516f',
+  heading6: '#004562',
+  contentSeparator: '#9854f1',
+  list: '#9ca1b8',
+  quote: '#8087a4',
+  emphasis: '#6a6f8e',
+  strong: '#404868',
+  link: '#2e7de9',
+  monospace: '#9ca0be',
+  strikethrough: '#7d819b',
+  inserted: '#587539',
+  deleted: '#ff3e64',
+  changed: '#b15c00',
+  invalid: '#ff3e64',
+  meta: '#8189a3',
+  documentMeta: '#737a92',
+  annotation: '#4ab2c9',
+  processingInstruction: '#6d7389',
+  definition: '#bdc2de',
+  constant: '#9854f1',
+  function: '#2e7de9',
+  standard: '#7a83a4',
+  local: '#8d95b3',
+  special: '#c17800',
+};
+
+export const tokyoNightDay: Extension = createBaseTheme(config);
diff --git a/frontend/src/views/editor/theme/types.ts b/frontend/src/views/editor/theme/types.ts
index 106403b..fd00144 100644
--- a/frontend/src/views/editor/theme/types.ts
+++ b/frontend/src/views/editor/theme/types.ts
@@ -1,52 +1,204 @@
-export interface ThemeColors {
-  // 主题基本信息
-  name: string;                     // 主题名称
-  dark: boolean;                    // 是否为深色主题标识
+export type SyntaxTag =
+  | 'comment'
+  | 'lineComment'
+  | 'blockComment'
+  | 'docComment'
+  | 'name'
+  | 'variableName'
+  | 'typeName'
+  | 'tagName'
+  | 'propertyName'
+  | 'attributeName'
+  | 'className'
+  | 'labelName'
+  | 'namespace'
+  | 'macroName'
+  | 'literal'
+  | 'string'
+  | 'docString'
+  | 'character'
+  | 'attributeValue'
+  | 'number'
+  | 'integer'
+  | 'float'
+  | 'bool'
+  | 'regexp'
+  | 'escape'
+  | 'color'
+  | 'url'
+  | 'keyword'
+  | 'self'
+  | 'null'
+  | 'atom'
+  | 'unit'
+  | 'modifier'
+  | 'operatorKeyword'
+  | 'controlKeyword'
+  | 'definitionKeyword'
+  | 'moduleKeyword'
+  | 'operator'
+  | 'derefOperator'
+  | 'arithmeticOperator'
+  | 'logicOperator'
+  | 'bitwiseOperator'
+  | 'compareOperator'
+  | 'updateOperator'
+  | 'definitionOperator'
+  | 'typeOperator'
+  | 'controlOperator'
+  | 'punctuation'
+  | 'separator'
+  | 'bracket'
+  | 'angleBracket'
+  | 'squareBracket'
+  | 'paren'
+  | 'brace'
+  | 'content'
+  | 'heading'
+  | 'heading1'
+  | 'heading2'
+  | 'heading3'
+  | 'heading4'
+  | 'heading5'
+  | 'heading6'
+  | 'contentSeparator'
+  | 'list'
+  | 'quote'
+  | 'emphasis'
+  | 'strong'
+  | 'link'
+  | 'monospace'
+  | 'strikethrough'
+  | 'inserted'
+  | 'deleted'
+  | 'changed'
+  | 'invalid'
+  | 'meta'
+  | 'documentMeta'
+  | 'annotation'
+  | 'processingInstruction'
+  | 'definition'
+  | 'constant'
+  | 'function'
+  | 'standard'
+  | 'local'
+  | 'special';
 
-  // 基础色调
-  background: string;               // 主背景色
-  backgroundSecondary: string;      // 次要背景色（用于代码块交替背景）
-  surface: string;                  // 面板背景
-  dropdownBackground: string;       // 下拉菜单背景
-  dropdownBorder: string;           // 下拉菜单边框
-
-  // 文本颜色
-  foreground: string;               // 主文本色
-  foregroundSecondary: string;      // 次要文本色
-  comment: string;                  // 注释色
-
-  // 语法高亮色 - 核心
-  keyword: string;                  // 关键字
-  string: string;                   // 字符串
-  function: string;                 // 函数名
-  number: string;                   // 数字
-  operator: string;                 // 操作符
-  variable: string;                 // 变量
-  type: string;                     // 类型
-
-  // 语法高亮色 - 扩展
-  constant: string;                 // 常量
-  storage: string;                  // 存储类型（如 static, const）
-  parameter: string;                // 参数
-  class: string;                    // 类名
-  heading: string;                  // 标题（Markdown等）
-  invalid: string;                  // 无效内容/错误
-  regexp: string;                   // 正则表达式
-
-  // 界面元素
-  cursor: string;                   // 光标
-  selection: string;                // 选中背景
-  selectionBlur: string;            // 失焦选中背景
-  activeLine: string;               // 当前行高亮
-  lineNumber: string;               // 行号
-  activeLineNumber: string;         // 活动行号颜色
-
-  // 边框和分割线
-  borderColor: string;              // 边框色
-  borderLight: string;              // 浅色边框
-
-  // 搜索和匹配
-  searchMatch: string;              // 搜索匹配
-  matchingBracket: string;          // 匹配括号
+export interface ThemeTagColors {
+  comment: string;
+  lineComment: string;
+  blockComment: string;
+  docComment: string;
+  name: string;
+  variableName: string;
+  typeName: string;
+  tagName: string;
+  propertyName: string;
+  attributeName: string;
+  className: string;
+  labelName: string;
+  namespace: string;
+  macroName: string;
+  literal: string;
+  string: string;
+  docString: string;
+  character: string;
+  attributeValue: string;
+  number: string;
+  integer: string;
+  float: string;
+  bool: string;
+  regexp: string;
+  escape: string;
+  color: string;
+  url: string;
+  keyword: string;
+  self: string;
+  null: string;
+  atom: string;
+  unit: string;
+  modifier: string;
+  operatorKeyword: string;
+  controlKeyword: string;
+  definitionKeyword: string;
+  moduleKeyword: string;
+  operator: string;
+  derefOperator: string;
+  arithmeticOperator: string;
+  logicOperator: string;
+  bitwiseOperator: string;
+  compareOperator: string;
+  updateOperator: string;
+  definitionOperator: string;
+  typeOperator: string;
+  controlOperator: string;
+  punctuation: string;
+  separator: string;
+  bracket: string;
+  angleBracket: string;
+  squareBracket: string;
+  paren: string;
+  brace: string;
+  content: string;
+  heading: string;
+  heading1: string;
+  heading2: string;
+  heading3: string;
+  heading4: string;
+  heading5: string;
+  heading6: string;
+  contentSeparator: string;
+  list: string;
+  quote: string;
+  emphasis: string;
+  strong: string;
+  link: string;
+  monospace: string;
+  strikethrough: string;
+  inserted: string;
+  deleted: string;
+  changed: string;
+  invalid: string;
+  meta: string;
+  documentMeta: string;
+  annotation: string;
+  processingInstruction: string;
+  definition: string;
+  constant: string;
+  function: string;
+  standard: string;
+  local: string;
+  special: string;
+}
+
+export interface ThemeColors extends ThemeTagColors {
+  themeName: string;
+  dark: boolean;
+
+  background: string;
+  backgroundSecondary: string;
+  surface: string;
+  dropdownBackground: string;
+  dropdownBorder: string;
+
+  foreground: string;
+  foregroundSecondary: string;
+
+  cursor: string;
+  selection: string;
+  selectionBlur: string;
+  activeLine: string;
+  lineNumber: string;
+  activeLineNumber: string;
+
+  diffInserted?: string;
+  diffDeleted?: string;
+  diffChanged?: string;
+
+  borderColor: string;
+    borderLight: string;
+
+  searchMatch: string;
+  matchingBracket: string;
 }