✨ Complete the custom editor theme

2025-07-11 23:03:28 +08:00
26 changed files with 1838 additions and 369 deletions
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ VoidRaft is a modern developer-focused text editor that allows you to record, or
 - Code formatting - Built-in Prettier support for one-click code beautification
 - Block editing mode - Split content into independent code blocks, each with different language settings
 - Multi-window support - edit multiple documents at the same time
+- Support for custom themes - Custom editor themes

 ### Modern Interface

@@ -118,7 +119,7 @@ Voidraft/
 | Linux | Planned | Future versions |

 ### Planned Features
- [ ] Custom themes - Customize editor themes
+- ✅ Custom themes - Customize editor themes
 - ✅ Multi-window support - Support editing multiple documents simultaneously
 - [ ] Enhanced clipboard - Monitor and manage clipboard history
 - [ ] Data synchronization - Cloud backup for configurations and documents
--- a/README_ZH.md
+++ b/README_ZH.md
@@ -15,6 +15,7 @@ Voidraft 是一个现代化的开发者专用文本编辑器，让你能够随
 - 代码格式化 - 内置 Prettier 支持，一键美化代码
 - 块状编辑模式 - 将内容分割为独立的代码块，每个块可设置不同语言
 - 支持多窗口 - 同时编辑多个文档
+- 支持自定义主题 - 自定义编辑器主题

 ### 现代化界面

@@ -119,7 +120,7 @@ Voidraft/
 | Linux | 计划中 | 后续版本 |

 ### 计划添加的功能
- [ ] 自定义主题 - 自定义编辑器主题
+- ✅ 自定义主题 - 自定义编辑器主题
 - ✅ 多窗口支持 - 支持同时编辑多个文档
 - [ ] 剪切板增强 - 监听和管理剪切板历史
 - [ ] 数据同步 - 配置和文档云端备份
--- a/frontend/bindings/voidraft/internal/models/models.ts
+++ b/frontend/bindings/voidraft/internal/models/models.ts
@@ -102,6 +102,11 @@ export class AppearanceConfig {
     */
    "systemTheme": SystemThemeType;

+    /**
+     * 自定义主题配置
+     */
+    "customTheme": CustomThemeConfig;
+
    /** Creates a new AppearanceConfig instance. */
    constructor($$source: Partial<AppearanceConfig> = {}) {
        if (!("language" in $$source)) {
@@ -110,6 +115,9 @@ export class AppearanceConfig {
        if (!("systemTheme" in $$source)) {
            this["systemTheme"] = ("" as SystemThemeType);
        }
+        if (!("customTheme" in $$source)) {
+            this["customTheme"] = (new CustomThemeConfig());
+        }

        Object.assign(this, $$source);
    }
@@ -118,7 +126,11 @@ export class AppearanceConfig {
     * Creates a new AppearanceConfig instance from a string or object.
     */
    static createFrom($$source: any = {}): AppearanceConfig {
+        const $$createField2_0 = $$createType5;
        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("customTheme" in $$parsedSource) {
+            $$parsedSource["customTheme"] = $$createField2_0($$parsedSource["customTheme"]);
+        }
        return new AppearanceConfig($$parsedSource as Partial<AppearanceConfig>);
    }
 }
@@ -158,6 +170,49 @@ export class ConfigMetadata {
    }
 }

+/**
+ * CustomThemeConfig 自定义主题配置
+ */
+export class CustomThemeConfig {
+    /**
+     * 深色主题配置
+     */
+    "darkTheme": ThemeColorConfig;
+
+    /**
+     * 浅色主题配置
+     */
+    "lightTheme": ThemeColorConfig;
+
+    /** Creates a new CustomThemeConfig instance. */
+    constructor($$source: Partial<CustomThemeConfig> = {}) {
+        if (!("darkTheme" in $$source)) {
+            this["darkTheme"] = (new ThemeColorConfig());
+        }
+        if (!("lightTheme" in $$source)) {
+            this["lightTheme"] = (new ThemeColorConfig());
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new CustomThemeConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): CustomThemeConfig {
+        const $$createField0_0 = $$createType6;
+        const $$createField1_0 = $$createType6;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("darkTheme" in $$parsedSource) {
+            $$parsedSource["darkTheme"] = $$createField0_0($$parsedSource["darkTheme"]);
+        }
+        if ("lightTheme" in $$parsedSource) {
+            $$parsedSource["lightTheme"] = $$createField1_0($$parsedSource["lightTheme"]);
+        }
+        return new CustomThemeConfig($$parsedSource as Partial<CustomThemeConfig>);
+    }
+}
+
 /**
 * Document represents a document in the system
 */
@@ -334,7 +389,7 @@ export class Extension {
     * Creates a new Extension instance from a string or object.
     */
    static createFrom($$source: any = {}): Extension {
-        const $$createField3_0 = $$createType5;
+        const $$createField3_0 = $$createType7;
        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
        if ("config" in $$parsedSource) {
            $$parsedSource["config"] = $$createField3_0($$parsedSource["config"]);
@@ -467,7 +522,7 @@ export class GeneralConfig {
     * Creates a new GeneralConfig instance from a string or object.
     */
    static createFrom($$source: any = {}): GeneralConfig {
-        const $$createField5_0 = $$createType7;
+        const $$createField5_0 = $$createType9;
        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
        if ("globalHotkey" in $$parsedSource) {
            $$parsedSource["globalHotkey"] = $$createField5_0($$parsedSource["globalHotkey"]);
@@ -1028,6 +1083,214 @@ export enum TabType {
    TabTypeTab = "tab",
 };

+/**
+ * ThemeColorConfig 主题颜色配置
+ */
+export class ThemeColorConfig {
+    /**
+     * 基础色调
+     * 主背景色
+     */
+    "background": string;
+
+    /**
+     * 次要背景色
+     */
+    "backgroundSecondary": string;
+
+    /**
+     * 面板背景
+     */
+    "surface": string;
+
+    /**
+     * 主文本色
+     */
+    "foreground": string;
+
+    /**
+     * 次要文本色
+     */
+    "foregroundSecondary": string;
+
+    /**
+     * 语法高亮
+     * 注释色
+     */
+    "comment": string;
+
+    /**
+     * 关键字
+     */
+    "keyword": string;
+
+    /**
+     * 字符串
+     */
+    "string": string;
+
+    /**
+     * 函数名
+     */
+    "function": string;
+
+    /**
+     * 数字
+     */
+    "number": string;
+
+    /**
+     * 操作符
+     */
+    "operator": string;
+
+    /**
+     * 变量
+     */
+    "variable": string;
+
+    /**
+     * 类型
+     */
+    "type": string;
+
+    /**
+     * 界面元素
+     * 光标
+     */
+    "cursor": string;
+
+    /**
+     * 选中背景
+     */
+    "selection": string;
+
+    /**
+     * 失焦选中背景
+     */
+    "selectionBlur": string;
+
+    /**
+     * 当前行高亮
+     */
+    "activeLine": string;
+
+    /**
+     * 行号
+     */
+    "lineNumber": string;
+
+    /**
+     * 活动行号
+     */
+    "activeLineNumber": string;
+
+    /**
+     * 边框分割线
+     * 边框色
+     */
+    "borderColor": string;
+
+    /**
+     * 浅色边框
+     */
+    "borderLight": string;
+
+    /**
+     * 搜索匹配
+     * 搜索匹配
+     */
+    "searchMatch": string;
+
+    /**
+     * 匹配括号
+     */
+    "matchingBracket": string;
+
+    /** Creates a new ThemeColorConfig instance. */
+    constructor($$source: Partial<ThemeColorConfig> = {}) {
+        if (!("background" in $$source)) {
+            this["background"] = "";
+        }
+        if (!("backgroundSecondary" in $$source)) {
+            this["backgroundSecondary"] = "";
+        }
+        if (!("surface" in $$source)) {
+            this["surface"] = "";
+        }
+        if (!("foreground" in $$source)) {
+            this["foreground"] = "";
+        }
+        if (!("foregroundSecondary" in $$source)) {
+            this["foregroundSecondary"] = "";
+        }
+        if (!("comment" in $$source)) {
+            this["comment"] = "";
+        }
+        if (!("keyword" in $$source)) {
+            this["keyword"] = "";
+        }
+        if (!("string" in $$source)) {
+            this["string"] = "";
+        }
+        if (!("function" in $$source)) {
+            this["function"] = "";
+        }
+        if (!("number" in $$source)) {
+            this["number"] = "";
+        }
+        if (!("operator" in $$source)) {
+            this["operator"] = "";
+        }
+        if (!("variable" in $$source)) {
+            this["variable"] = "";
+        }
+        if (!("type" in $$source)) {
+            this["type"] = "";
+        }
+        if (!("cursor" in $$source)) {
+            this["cursor"] = "";
+        }
+        if (!("selection" in $$source)) {
+            this["selection"] = "";
+        }
+        if (!("selectionBlur" in $$source)) {
+            this["selectionBlur"] = "";
+        }
+        if (!("activeLine" in $$source)) {
+            this["activeLine"] = "";
+        }
+        if (!("lineNumber" in $$source)) {
+            this["lineNumber"] = "";
+        }
+        if (!("activeLineNumber" in $$source)) {
+            this["activeLineNumber"] = "";
+        }
+        if (!("borderColor" in $$source)) {
+            this["borderColor"] = "";
+        }
+        if (!("borderLight" in $$source)) {
+            this["borderLight"] = "";
+        }
+        if (!("searchMatch" in $$source)) {
+            this["searchMatch"] = "";
+        }
+        if (!("matchingBracket" in $$source)) {
+            this["matchingBracket"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ThemeColorConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ThemeColorConfig {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new ThemeColorConfig($$parsedSource as Partial<ThemeColorConfig>);
+    }
+}
+
 /**
 * UpdateSourceType 更新源类型
 */
@@ -1126,8 +1389,8 @@ export class UpdatesConfig {
     * Creates a new UpdatesConfig instance from a string or object.
     */
    static createFrom($$source: any = {}): UpdatesConfig {
-        const $$createField6_0 = $$createType8;
-        const $$createField7_0 = $$createType9;
+        const $$createField6_0 = $$createType10;
+        const $$createField7_0 = $$createType11;
        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
        if ("github" in $$parsedSource) {
            $$parsedSource["github"] = $$createField6_0($$parsedSource["github"]);
@@ -1145,13 +1408,15 @@ const $$createType1 = EditingConfig.createFrom;
 const $$createType2 = AppearanceConfig.createFrom;
 const $$createType3 = UpdatesConfig.createFrom;
 const $$createType4 = ConfigMetadata.createFrom;
-var $$createType5 = (function $$initCreateType5(...args): any {
-    if ($$createType5 === $$initCreateType5) {
-        $$createType5 = $$createType6;
+const $$createType5 = CustomThemeConfig.createFrom;
+const $$createType6 = ThemeColorConfig.createFrom;
+var $$createType7 = (function $$initCreateType7(...args): any {
+    if ($$createType7 === $$initCreateType7) {
+        $$createType7 = $$createType8;
    }
-    return $$createType5(...args);
+    return $$createType7(...args);
 });
-const $$createType6 = $Create.Map($Create.Any, $Create.Any);
-const $$createType7 = HotkeyCombo.createFrom;
-const $$createType8 = GithubConfig.createFrom;
-const $$createType9 = GiteaConfig.createFrom;
+const $$createType8 = $Create.Map($Create.Any, $Create.Any);
+const $$createType9 = HotkeyCombo.createFrom;
+const $$createType10 = GithubConfig.createFrom;
+const $$createType11 = GiteaConfig.createFrom;
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
    BlockLanguageSelector: typeof import('./src/components/toolbar/BlockLanguageSelector.vue')['default']
    DocumentSelector: typeof import('./src/components/toolbar/DocumentSelector.vue')['default']
    LinuxTitleBar: typeof import('./src/components/titlebar/LinuxTitleBar.vue')['default']
+    LoadingScreen: typeof import('./src/components/loading/LoadingScreen.vue')['default']
    MacOSTitleBar: typeof import('./src/components/titlebar/MacOSTitleBar.vue')['default']
    MemoryMonitor: typeof import('./src/components/monitor/MemoryMonitor.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -54,6 +54,7 @@
        "sass": "^1.89.2",
        "vue": "^3.5.17",
        "vue-i18n": "^11.1.9",
+        "vue-pick-colors": "^1.8.0",
        "vue-router": "^4.5.1"
      },
      "devDependencies": {
@@ -1822,6 +1823,16 @@
        "url": "https://opencollective.com/parcel"
      }
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-beta.19",
      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
@@ -5304,6 +5315,19 @@
      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
      "license": "MIT"
    },
+    "node_modules/vue-pick-colors": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/vue-pick-colors/-/vue-pick-colors-1.8.0.tgz",
+      "integrity": "sha512-lIP28A1BZEPp0v0Y6m9lNbsC6jNM2LP+Dc2tJbUXiNRvDgXqBMe/msX3svqjspV4B+SZdPAjx75JY2zem0hA2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.11.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.2",
+        "vue": "^3.2.26"
+      }
+    },
    "node_modules/vue-router": {
      "version": "4.5.1",
      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -58,6 +58,7 @@
    "sass": "^1.89.2",
    "vue": "^3.5.17",
    "vue-i18n": "^11.1.9",
+    "vue-pick-colors": "^1.8.0",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
--- a/frontend/src/assets/styles/variables.css
+++ b/frontend/src/assets/styles/variables.css
@@ -28,6 +28,11 @@
  --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;
@@ -55,6 +60,11 @@
  --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);
@@ -83,6 +93,12 @@
  --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;
 }
@@ -116,6 +132,11 @@
    --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);
  }
 }

@@ -148,6 +169,11 @@
    --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);
  }
 }

@@ -179,6 +205,11 @@
  --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);
 }

 /* 手动选择深色主题 */
@@ -207,4 +238,11 @@
  --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);
 }
--- a/frontend/src/components/loading/LoadingScreen.vue
+++ b/frontend/src/components/loading/LoadingScreen.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'LOADING'
+  }
+});
+
+const characters = ref<HTMLSpanElement[]>([]);
+const isDone = ref(false);
+const cycleCount = 5;
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-_=+{}|[]\\;\':"<>?,./`~'.split('');
+let animationFrameId: number | null = null;
+let resetTimeoutId: number | null = null;
+
+// 将字符串拆分为单个字符的span
+function letterize() {
+  const container = document.querySelector('.loading-word');
+  if (!container) return;
+  
+  // 清除现有内容
+  container.innerHTML = '';
+  
+  // 为每个字符创建span
+  for (let i = 0; i < props.text.length; i++) {
+    const span = document.createElement('span');
+    span.setAttribute('data-orig', props.text[i]);
+    span.textContent = '-';
+    span.className = `char${i+1}`;
+    container.appendChild(span);
+  }
+  
+  // 获取所有span元素
+  characters.value = Array.from(container.querySelectorAll('span'));
+}
+
+// 获取随机字符
+function getRandomChar() {
+  return chars[Math.floor(Math.random() * chars.length)];
+}
+
+// 动画循环
+function animationLoop() {
+  let currentCycle = 0;
+  let currentLetterIndex = 0;
+  let isAnimationDone = false;
+  
+  function loop() {
+    // 为未完成的字符设置随机字符和不透明度
+    for (let i = currentLetterIndex; i < characters.value.length; i++) {
+      const char = characters.value[i];
+      if (!char.classList.contains('done')) {
+        char.textContent = getRandomChar();
+        char.style.opacity = Math.random().toString();
+      }
+    }
+    
+    if (currentCycle < cycleCount) {
+      // 继续当前周期
+      currentCycle++;
+    } else if (currentLetterIndex < characters.value.length) {
+      // 当前周期结束，显示下一个字符的原始值
+      const currentChar = characters.value[currentLetterIndex];
+      currentChar.textContent = currentChar.getAttribute('data-orig') || '';
+      currentChar.style.opacity = '1';
+      currentChar.classList.add('done');
+      currentLetterIndex++;
+      currentCycle = 0;
+    } else {
+      // 所有字符都已显示
+      isAnimationDone = true;
+      isDone.value = true;
+    }
+    
+    if (!isAnimationDone) {
+      animationFrameId = requestAnimationFrame(loop);
+    } else {
+      // 等待一段时间后重置动画
+      resetTimeoutId = window.setTimeout(() => {
+        reset();
+      }, 750);
+    }
+  }
+  
+  loop();
+}
+
+// 重置动画
+function reset() {
+  isDone.value = false;
+  
+  for (const char of characters.value) {
+    char.textContent = char.getAttribute('data-orig') || '';
+    char.classList.remove('done');
+  }
+  
+  animationLoop();
+}
+
+// 清理所有定时器
+function cleanup() {
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
+  }
+  
+  if (resetTimeoutId !== null) {
+    clearTimeout(resetTimeoutId);
+    resetTimeoutId = null;
+  }
+}
+
+onMounted(() => {
+  letterize();
+  animationLoop();
+});
+
+onBeforeUnmount(() => {
+  cleanup();
+});
+</script>
+
+<template>
+  <div class="loading-screen">
+    <div class="loading-word"></div>
+    <div class="overlay"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.loading-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--voidraft-bg-gradient, radial-gradient(#222922, #000500));
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--voidraft-mono-font, monospace),serif;
+}
+
+.loading-word {
+  color: var(--voidraft-loading-color, #fff);
+  font-size: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  text-align: center;
+  text-shadow: var(--voidraft-loading-glow, 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5));
+}
+
+.loading-word span {
+  display: inline-block;
+  transform: translateX(100%) scale(0.9);
+  transition: transform 500ms;
+}
+
+.loading-word .done {
+  color: var(--voidraft-loading-done-color, #6f6);
+  transform: translateX(0) scale(1);
+}
+
+.overlay {
+  background-image: var(--voidraft-loading-overlay, linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%));
+  background-size: 1000px 2px;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+}
+</style> 
--- a/frontend/src/components/titlebar/LinuxTitleBar.vue
+++ b/frontend/src/components/titlebar/LinuxTitleBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
+  <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
      <div class="titlebar-icon">
        <img src="/appicon.png" alt="voidraft" />
--- a/frontend/src/components/titlebar/WindowsTitleBar.vue
+++ b/frontend/src/components/titlebar/WindowsTitleBar.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState"
-       @mouseup="checkMaximizedState">
+  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
      <div class="titlebar-icon">
        <img src="/appicon.png" alt="voidraft"/>
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -122,9 +122,11 @@ export default {
    keyBindings: 'Key Bindings',
    updates: 'Updates',
    reset: 'Reset',
+    apply: 'Apply',
+    cancel: 'Cancel',
    dangerZone: 'Danger Zone',
    resetAllSettings: 'Reset All Settings',
-    confirmReset: 'Click again to confirm reset',
+    confirmReset: 'Confirm the reset?',
    globalHotkey: 'Global Keyboard Shortcuts',
    enableGlobalHotkey: 'Enable Global Hotkeys',
    window: 'Window/Application',
@@ -156,6 +158,40 @@ export default {
      '800': 'Extra Bold (800)',
      '900': 'Black (900)'
    },
+    customThemeColors: 'Custom Theme Colors',
+    resetToDefault: 'Reset to Default',
+    colorValue: 'Color Value',
+    themeColors: {
+      basic: 'Basic Colors',
+      text: 'Text Colors',
+      syntax: 'Syntax Highlighting',
+      interface: 'Interface Elements',
+      border: 'Borders & Dividers',
+      search: 'Search & Matching',
+      background: 'Main Background',
+      backgroundSecondary: 'Secondary Background',
+      surface: 'Panel Background',
+      foreground: 'Primary Text',
+      foregroundSecondary: 'Secondary Text',
+      comment: 'Comments',
+      keyword: 'Keywords',
+      string: 'Strings',
+      function: 'Functions',
+      number: 'Numbers',
+      operator: 'Operators',
+      variable: 'Variables',
+      type: 'Types',
+      cursor: 'Cursor',
+      selection: 'Selection Background',
+      selectionBlur: 'Unfocused Selection',
+      activeLine: 'Active Line Highlight',
+      lineNumber: 'Line Numbers',
+      activeLineNumber: 'Active Line Number',
+      borderColor: 'Border Color',
+      borderLight: 'Light Border',
+      searchMatch: 'Search Match',
+      matchingBracket: 'Matching Bracket'
+    },
    fontFamilies: {
      harmonyOS: 'HarmonyOS Sans',
      microsoftYahei: 'Microsoft YaHei',
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -123,9 +123,11 @@ export default {
    keyBindings: '快捷键',
    updates: '更新',
    reset: '重置',
+    apply: '应用',
+    cancel: '取消',
    dangerZone: '危险操作',
    resetAllSettings: '重置所有设置',
-    confirmReset: '再次点击确认重置',
+    confirmReset: '确认重置?',
    globalHotkey: '全局键盘快捷键',
    enableGlobalHotkey: '启用全局热键',
    window: '窗口/应用程序',
@@ -196,6 +198,40 @@ export default {
      '800': '超粗 (800)',
      '900': '极粗 (900)'
    },
+    customThemeColors: '自定义主题颜色',
+    resetToDefault: '重置为默认',
+    colorValue: '颜色值',
+    themeColors: {
+      basic: '基础色调',
+      text: '文本颜色',
+      syntax: '语法高亮',
+      interface: '界面元素',
+      border: '边框分割线',
+      search: '搜索匹配',
+      background: '主背景色',
+      backgroundSecondary: '次要背景色',
+      surface: '面板背景',
+      foreground: '主文本色',
+      foregroundSecondary: '次要文本色',
+      comment: '注释色',
+      keyword: '关键字',
+      string: '字符串',
+      function: '函数名',
+      number: '数字',
+      operator: '操作符',
+      variable: '变量',
+      type: '类型',
+      cursor: '光标',
+      selection: '选中背景',
+      selectionBlur: '失焦选中背景',
+      activeLine: '当前行高亮',
+      lineNumber: '行号',
+      activeLineNumber: '活动行号',
+      borderColor: '边框色',
+      borderLight: '浅色边框',
+      searchMatch: '搜索匹配',
+      matchingBracket: '匹配括号'
+    },
    fontFamilies: {
      harmonyOS: '鸿蒙字体',
      microsoftYahei: '微软雅黑',
--- a/frontend/src/stores/configStore.ts
+++ b/frontend/src/stores/configStore.ts
@@ -73,7 +73,8 @@ const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {

 const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
    language: 'appearance.language',
-    systemTheme: 'appearance.systemTheme'
+    systemTheme: 'appearance.systemTheme',
+    customTheme: 'appearance.customTheme'
 } as const;

 const UPDATES_CONFIG_KEY_MAP: UpdatesConfigKeyMap = {
@@ -171,7 +172,77 @@ const DEFAULT_CONFIG: AppConfig = {
    },
    appearance: {
        language: LanguageType.LangZhCN,
-        systemTheme: SystemThemeType.SystemThemeAuto
+        systemTheme: SystemThemeType.SystemThemeAuto,
+        customTheme: {
+            darkTheme: {
+                // 基础色调
+                background: '#252B37',
+                backgroundSecondary: '#213644',
+                surface: '#474747',
+                foreground: '#9BB586',
+                foregroundSecondary: '#9c9c9c',
+                
+                // 语法高亮
+                comment: '#6272a4',
+                keyword: '#ff79c6',
+                string: '#f1fa8c',
+                function: '#50fa7b',
+                number: '#bd93f9',
+                operator: '#ff79c6',
+                variable: '#8fbcbb',
+                type: '#8be9fd',
+                
+                // 界面元素
+                cursor: '#fff',
+                selection: '#0865a9aa',
+                selectionBlur: '#225377aa',
+                activeLine: 'rgba(255,255,255,0.04)',
+                lineNumber: 'rgba(255,255,255, 0.15)',
+                activeLineNumber: 'rgba(255,255,255, 0.6)',
+                
+                // 边框分割线
+                borderColor: '#1e222a',
+                borderLight: 'rgba(255,255,255, 0.1)',
+                
+                // 搜索匹配
+                searchMatch: '#8fbcbb',
+                matchingBracket: 'rgba(255,255,255,0.1)'
+            },
+            lightTheme: {
+                // 基础色调
+                background: '#ffffff',
+                backgroundSecondary: '#f1faf1',
+                surface: '#f5f5f5',
+                foreground: '#444d56',
+                foregroundSecondary: '#6a737d',
+                
+                // 语法高亮
+                comment: '#6a737d',
+                keyword: '#d73a49',
+                string: '#032f62',
+                function: '#005cc5',
+                number: '#005cc5',
+                operator: '#d73a49',
+                variable: '#24292e',
+                type: '#6f42c1',
+                
+                // 界面元素
+                cursor: '#000',
+                selection: '#77baff8c',
+                selectionBlur: '#b2c2ca85',
+                activeLine: '#000000',
+                lineNumber: '#000000',
+                activeLineNumber: '#000000',
+                
+                // 边框分割线
+                borderColor: '#dfdfdf',
+                borderLight: '#0000000C',
+                
+                // 搜索匹配
+                searchMatch: '#005cc5',
+                matchingBracket: 'rgba(0,0,0,0.1)'
+            }
+        }
    },
    updates: {
        version: "1.0.0",
@@ -363,6 +434,51 @@ export const useConfigStore = defineStore('config', () => {
        await updateAppearanceConfig('systemTheme', systemTheme);
    };

+    // 更新自定义主题方法
+    const updateCustomTheme = async (themeType: 'darkTheme' | 'lightTheme', colorKey: string, colorValue: string): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        try {
+            // 深拷贝当前配置
+            const customTheme = JSON.parse(JSON.stringify(state.config.appearance.customTheme));
+            
+            // 更新对应主题的颜色值
+            customTheme[themeType][colorKey] = colorValue;
+            
+            // 更新整个自定义主题配置到后端
+            await ConfigService.Set(APPEARANCE_CONFIG_KEY_MAP.customTheme, customTheme);
+            
+            // 更新前端状态
+            state.config.appearance.customTheme = customTheme;
+        } catch (error) {
+            throw error;
+        }
+    };
+
+    // 设置整个自定义主题配置
+    const setCustomTheme = async (customTheme: any): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        try {
+            // 更新整个自定义主题配置到后端
+            await ConfigService.Set(APPEARANCE_CONFIG_KEY_MAP.customTheme, customTheme);
+            
+            // 更新前端状态
+            state.config.appearance.customTheme = customTheme;
+            
+            // 确保Vue能检测到变化
+            state.config.appearance = { ...state.config.appearance };
+        } catch (error) {
+            throw error;
+        }
+    };
+
    // 初始化语言设置
    const initializeLanguage = async (): Promise<void> => {
        try {
@@ -426,6 +542,8 @@ export const useConfigStore = defineStore('config', () => {

        // 主题相关方法
        setSystemTheme,
+        updateCustomTheme,
+        setCustomTheme,

        // 字体大小操作
        ...adjusters.fontSize,
--- a/frontend/src/stores/editorStore.ts
+++ b/frontend/src/stores/editorStore.ts
@@ -65,6 +65,9 @@ export const useEditorStore = defineStore('editor', () => {
        characters: 0,
        selectedCharacters: 0
    });
+    
+    // 编辑器加载状态
+    const isLoading = ref(false);

    // 异步操作竞态条件控制
    const operationSequence = ref(0);
@@ -434,10 +437,12 @@ export const useEditorStore = defineStore('editor', () => {

    // 加载编辑器
    const loadEditor = async (documentId: number, content: string) => {
+        // 设置加载状态
+        isLoading.value = true;
        // 生成新的操作ID
        const operationId = getNextOperationId();
        const abortController = new AbortController();
-        
+
        try {
            // 验证参数
            if (!documentId) {
@@ -500,15 +505,20 @@ export const useEditorStore = defineStore('editor', () => {
        } catch (error) {
            if (error instanceof Error && error.message === 'Operation cancelled') {
                console.log(`Editor loading cancelled for document ${documentId}`);
-                return;
+            } else {
+                console.error('Failed to load editor:', error);
            }
-            console.error('Failed to load editor:', error);
        } finally {
            // 清理操作记录
            pendingOperations.value.delete(operationId);
            if (currentLoadingDocumentId.value === documentId) {
                currentLoadingDocumentId.value = null;
            }
+            
+            // 延迟一段时间后再取消加载状态
+            setTimeout(() => {
+                isLoading.value = false;
+            }, 800);
        }
    };

@@ -684,6 +694,7 @@ export const useEditorStore = defineStore('editor', () => {
        // 状态
        currentEditor,
        documentStats,
+        isLoading,

        // 方法
        setEditorContainer,
--- a/frontend/src/stores/themeStore.ts
+++ b/frontend/src/stores/themeStore.ts
@@ -1,19 +1,41 @@
-import { defineStore } from 'pinia';
-import { computed } from 'vue';
-import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
-import { useConfigStore } from './configStore';
+import {defineStore} from 'pinia';
+import {computed, reactive} from 'vue';
+import {SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
+import {useConfigStore} from './configStore';
+import {useEditorStore} from './editorStore';
+import {defaultDarkColors} from '@/views/editor/theme/dark';
+import {defaultLightColors} from '@/views/editor/theme/light';

 /**
 * 主题管理 Store
- * 职责：
+ * 职责：管理主题状态和颜色配置
 */
 export const useThemeStore = defineStore('theme', () => {
  const configStore = useConfigStore();
  
+  // 响应式状态 - 存储当前使用的主题颜色
+  const themeColors = reactive({
+    darkTheme: { ...defaultDarkColors },
+    lightTheme: { ...defaultLightColors }
+  });
+  
+  // 计算属性 - 当前选择的主题类型
  const currentTheme = computed(() => 
    configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
  );

+  // 初始化主题颜色 - 从配置加载
+  const initializeThemeColors = () => {
+    const customTheme = configStore.config?.appearance?.customTheme;
+    if (customTheme) {
+      if (customTheme.darkTheme) {
+        Object.assign(themeColors.darkTheme, customTheme.darkTheme);
+      }
+      if (customTheme.lightTheme) {
+        Object.assign(themeColors.lightTheme, customTheme.lightTheme);
+      }
+    }
+  };

  // 应用主题到 DOM
  const applyThemeToDOM = (theme: SystemThemeType) => {
@@ -27,18 +49,97 @@ export const useThemeStore = defineStore('theme', () => {
  const initializeTheme = () => {
    const theme = configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto;
    applyThemeToDOM(theme);
+    initializeThemeColors();
  };

  // 设置主题
  const setTheme = async (theme: SystemThemeType) => {
    await configStore.setSystemTheme(theme);
    applyThemeToDOM(theme);
+    refreshEditorTheme();
+  };
+  
+  // 更新主题颜色
+  const updateThemeColors = (darkColors: any = null, lightColors: any = null): boolean => {
+    let hasChanges = false;
+    
+    if (darkColors) {
+      Object.entries(darkColors).forEach(([key, value]) => {
+        if (value !== undefined && themeColors.darkTheme[key] !== value) {
+          themeColors.darkTheme[key] = value;
+          hasChanges = true;
+        }
+      });
+    }
+    
+    if (lightColors) {
+      Object.entries(lightColors).forEach(([key, value]) => {
+        if (value !== undefined && themeColors.lightTheme[key] !== value) {
+          themeColors.lightTheme[key] = value;
+          hasChanges = true;
+        }
+      });
+    }
+    
+    return hasChanges;
+  };
+  
+  // 保存主题颜色到配置
+  const saveThemeColors = async () => {
+    const customTheme = {
+      darkTheme: { ...themeColors.darkTheme },
+      lightTheme: { ...themeColors.lightTheme }
+    };
+    
+    await configStore.setCustomTheme(customTheme);
+  };
+  
+  // 重置主题颜色
+  const resetThemeColors = async (themeType: 'darkTheme' | 'lightTheme') => {
+    try {
+      // 1. 更新内存中的颜色状态
+      if (themeType === 'darkTheme') {
+        Object.assign(themeColors.darkTheme, defaultDarkColors);
+      }
+      
+      if (themeType === 'lightTheme') {
+        Object.assign(themeColors.lightTheme, defaultLightColors);
+      }
+      
+      // 2. 保存到配置
+      await saveThemeColors();
+      
+      // 3. 刷新编辑器主题
+      refreshEditorTheme();
+      
+      return true;
+    } catch (error) {
+      console.error('Failed to reset theme colors:', error);
+      return false;
+    }
+  };
+  
+  // 刷新编辑器主题（在主题颜色更改后调用）
+  const refreshEditorTheme = () => {
+    // 使用当前主题重新应用DOM主题
+    const theme = currentTheme.value;
+    applyThemeToDOM(theme);
+    
+    const editorStore = useEditorStore();
+    if (editorStore) {
+      editorStore.applyThemeSettings();
+    }
  };

  return {
    currentTheme,
+    themeColors,
    setTheme,
    initializeTheme,
    applyThemeToDOM,
+    updateThemeColors,
+    saveThemeColors,
+    resetThemeColors,
+    refreshEditorTheme
  };
-}); 
+});
--- a/frontend/src/views/editor/Editor.vue
+++ b/frontend/src/views/editor/Editor.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
+import {onBeforeUnmount, onMounted, ref} from 'vue';
 import {useEditorStore} from '@/stores/editorStore';
 import {useDocumentStore} from '@/stores/documentStore';
 import {useConfigStore} from '@/stores/configStore';
 import {createWheelZoomHandler} from './basic/wheelZoomExtension';
 import Toolbar from '@/components/toolbar/Toolbar.vue';
 import {useWindowStore} from "@/stores/windowStore";
+import LoadingScreen from '@/components/loading/LoadingScreen.vue';

 const editorStore = useEditorStore();
 const documentStore = useDocumentStore();
 const configStore = useConfigStore();
 const windowStore = useWindowStore();

-
 const editorElement = ref<HTMLElement | null>(null);

 // 创建滚轮缩放处理器
@@ -25,7 +25,6 @@ onMounted(async () => {
  if (!editorElement.value) return;

  // 从URL查询参数中获取documentId
-
  const urlDocumentId = windowStore.currentDocumentId ? parseInt(windowStore.currentDocumentId) : undefined;
  
  // 初始化文档存储，优先使用URL参数中的文档ID
@@ -48,6 +47,7 @@ onBeforeUnmount(() => {

 <template>
  <div class="editor-container">
+    <LoadingScreen v-if="editorStore.isLoading" text="VOIDRAFT" />
    <div ref="editorElement" class="editor"></div>
    <Toolbar/>
  </div>
@@ -60,6 +60,7 @@ onBeforeUnmount(() => {
  overflow: hidden;
  display: flex;
  flex-direction: column;
+  position: relative;

  .editor {
    width: 100%;
--- a/frontend/src/views/editor/basic/themeExtension.ts
+++ b/frontend/src/views/editor/basic/themeExtension.ts
@@ -1,8 +1,9 @@
 import { Extension, Compartment } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
-import { dark } from '@/views/editor/theme/dark';
-import { light } from '@/views/editor/theme/light';
+import { createDarkTheme } from '@/views/editor/theme/dark';
+import { createLightTheme } from '@/views/editor/theme/light';
+import { useThemeStore } from '@/stores/themeStore';

 // 主题区间 - 用于动态切换主题
 export const themeCompartment = new Compartment();
@@ -11,6 +12,8 @@ export const themeCompartment = new Compartment();
 * 根据主题类型获取主题扩展
 */
 const getThemeExtension = (themeType: SystemThemeType): Extension => {
+  const themeStore = useThemeStore();
+  
  // 处理 auto 主题类型
  let actualTheme: SystemThemeType = themeType;
  if (themeType === SystemThemeType.SystemThemeAuto) {
@@ -19,13 +22,11 @@ const getThemeExtension = (themeType: SystemThemeType): Extension => {
      : SystemThemeType.SystemThemeLight;
  }

-  // 直接返回对应的主题扩展
-  switch (actualTheme) {
-    case SystemThemeType.SystemThemeLight:
-      return light;
-    case SystemThemeType.SystemThemeDark:
-    default:
-      return dark;
+  // 根据主题类型创建主题
+  if (actualTheme === SystemThemeType.SystemThemeLight) {
+    return createLightTheme(themeStore.themeColors.lightTheme);
+  } else {
+    return createDarkTheme(themeStore.themeColors.darkTheme);
  }
 };

@@ -45,9 +46,13 @@ export const updateEditorTheme = (view: EditorView, themeType: SystemThemeType):
    return;
  }

-  const extension = getThemeExtension(themeType);
-  view.dispatch({
-    effects: themeCompartment.reconfigure(extension)
-  });
+  try {
+    const extension = getThemeExtension(themeType);
+    view.dispatch({
+      effects: themeCompartment.reconfigure(extension)
+    });
+  } catch (error) {
+    console.error('Failed to update editor theme:', error);
+  }
 };

--- a/frontend/src/views/editor/extensions/rainbowBracket/rainbowBracketsExtension.ts
+++ b/frontend/src/views/editor/extensions/rainbowBracket/rainbowBracketsExtension.ts
@@ -3,8 +3,7 @@ import { Range } from '@codemirror/state';

 // 生成彩虹颜色数组
 function generateColors(): string[] {
-    return [
-        'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet',
+    return ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'
    ];
 }

@@ -75,13 +74,13 @@ export default function rainbowBracketsExtension() {
        rainbowBracketsPlugin,
        EditorView.baseTheme({
            // 为每种颜色定义CSS样式
-            '.cm-rainbow-bracket-red': { color: 'red' },
-            '.cm-rainbow-bracket-orange': { color: 'orange' },
-            '.cm-rainbow-bracket-yellow': { color: 'yellow' },
-            '.cm-rainbow-bracket-green': { color: 'green' },
-            '.cm-rainbow-bracket-blue': { color: 'blue' },
-            '.cm-rainbow-bracket-indigo': { color: 'indigo' },
-            '.cm-rainbow-bracket-violet': { color: 'violet' },
+            '.cm-rainbow-bracket-red': { color: '#FF6B6B' },
+            '.cm-rainbow-bracket-orange': { color: '#FF9E6B' },
+            '.cm-rainbow-bracket-yellow': { color: '#FFD166' },
+            '.cm-rainbow-bracket-green': { color: '#06D6A0' },
+            '.cm-rainbow-bracket-blue': { color: '#118AB2' },
+            '.cm-rainbow-bracket-indigo': { color: '#6B5B95' },
+            '.cm-rainbow-bracket-violet': { color: '#9B5DE5' },
        }),
    ];
 }
--- a/frontend/src/views/editor/manager/ExtensionManager.ts
+++ b/frontend/src/views/editor/manager/ExtensionManager.ts
@@ -65,6 +65,10 @@ export class ExtensionManager {
    // 注册的扩展工厂
    private extensionFactories = new Map<ExtensionID, ExtensionFactory>()
    
+    // 防抖处理
+    private debounceTimers = new Map<ExtensionID, number>()
+    private debounceDelay = 300  // 默认防抖时间为300毫秒
+    
    /**
     * 注册扩展工厂
     * @param id 扩展ID
@@ -187,13 +191,24 @@ export class ExtensionManager {
    }

    /**
-     * 更新单个扩展配置并应用到所有视图
+     * 更新单个扩展配置并应用到所有视图（带防抖功能）
     * @param id 扩展ID
     * @param enabled 是否启用
     * @param config 扩展配置
     */
    updateExtension(id: ExtensionID, enabled: boolean, config: any = {}): void {
-        this.updateExtensionImmediate(id, enabled, config)
+        // 清除之前的定时器
+        if (this.debounceTimers.has(id)) {
+            window.clearTimeout(this.debounceTimers.get(id))
+        }
+        
+        // 设置新的定时器
+        const timerId = window.setTimeout(() => {
+            this.updateExtensionImmediate(id, enabled, config)
+            this.debounceTimers.delete(id)
+        }, this.debounceDelay)
+        
+        this.debounceTimers.set(id, timerId)
    }

    /**
@@ -262,6 +277,14 @@ export class ExtensionManager {
        enabled: boolean
        config: any
    }>): void {
+        // 清除所有相关的防抖定时器
+        for (const update of updates) {
+            if (this.debounceTimers.has(update.id)) {
+                window.clearTimeout(this.debounceTimers.get(update.id))
+                this.debounceTimers.delete(update.id)
+            }
+        }
+        
        // 更新所有扩展状态
        for (const update of updates) {
            // 获取扩展状态
@@ -357,6 +380,12 @@ export class ExtensionManager {
     * 销毁管理器
     */
    destroy(): void {
+        // 清除所有防抖定时器
+        for (const timerId of this.debounceTimers.values()) {
+            window.clearTimeout(timerId)
+        }
+        this.debounceTimers.clear()
+        
        this.viewsMap.clear()
        this.activeViewId = null
        this.extensionFactories.clear()
--- a/frontend/src/views/editor/theme/dark.ts
+++ b/frontend/src/views/editor/theme/dark.ts
@@ -2,203 +2,205 @@ import {EditorView} from '@codemirror/view';
 import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
 import {tags} from '@lezer/highlight';

-const colors = {
-    // 基础色调
-    background: '#252B37',        // 主背景色
-    // backgroundAlt: '#252B37',     // 交替背景色
-    backgroundSecondary: '#213644', // 次要背景色
-    surface: '#474747',           // 面板背景
+// 默认深色主题颜色
+export const defaultDarkColors = {
+  // 基础色调
+  background: '#252B37',        // 主背景色
+  backgroundSecondary: '#213644', // 次要背景色
+  surface: '#474747',           // 面板背景

-    // 文本颜色
-    foreground: '#9BB586',        // 主文本色
-    foregroundSecondary: '#9c9c9c', // 次要文本色
-    comment: '#6272a4',           // 注释色
+  // 文本颜色
+  foreground: '#9BB586',        // 主文本色
+  foregroundSecondary: '#9c9c9c', // 次要文本色
+  comment: '#6272a4',           // 注释色

-    // 语法高亮色
-    keyword: '#ff79c6',           // 关键字
-    string: '#f1fa8c',            // 字符串
-    function: '#50fa7b',          // 函数名
-    number: '#bd93f9',            // 数字
-    operator: '#ff79c6',          // 操作符
-    variable: '#8fbcbb',          // 变量
-    type: '#8be9fd',             // 类型
+  // 语法高亮色
+  keyword: '#ff79c6',           // 关键字
+  string: '#f1fa8c',            // 字符串
+  function: '#50fa7b',          // 函数名
+  number: '#bd93f9',            // 数字
+  operator: '#ff79c6',          // 操作符
+  variable: '#8fbcbb',          // 变量
+  type: '#8be9fd',             // 类型

-    // 界面元素
-    cursor: '#fff',               // 光标
-    selection: '#0865a9aa',       // 选中背景
-    selectionBlur: '#225377aa',   // 失焦选中背景
-    activeLine: 'rgba(255,255,255,0.04)', // 当前行高亮
-    lineNumber: 'rgba(255,255,255, 0.15)', // 行号
-    activeLineNumber: 'rgba(255,255,255, 0.6)', // 活动行号
+  // 界面元素
+  cursor: '#ffffff',               // 光标
+  selection: '#0865a9',       // 选中背景
+  selectionBlur: '#225377',   // 失焦选中背景
+  activeLine: '#ffffff0a', // 当前行高亮
+  lineNumber: '#ffffff26', // 行号
+  activeLineNumber: '#ffffff99', // 活动行号

-    // 边框和分割线
-    border: '#1e222a',            // 边框色
-    borderLight: 'rgba(255,255,255, 0.1)', // 浅色边框
+  // 边框和分割线
+  borderColor: '#1e222a',            // 边框色
+  borderLight: '#ffffff19', // 浅色边框

-    // 搜索和匹配
-    searchMatch: '#8fbcbb',       // 搜索匹配
-    matchingBracket: 'rgba(255,255,255,0.1)', // 匹配括号
+  // 搜索和匹配
+  searchMatch: '#8fbcbb',       // 搜索匹配
+  matchingBracket: '#ffffff19', // 匹配括号
 };

-const darkTheme = EditorView.theme({
+// 创建深色主题
+export function createDarkTheme(colors = defaultDarkColors) {
+  const darkTheme = EditorView.theme({
    '&': {
-        color: colors.foreground,
-        backgroundColor: colors.background,
+      color: colors.foreground,
+      backgroundColor: colors.background,
    },

    // 确保编辑器容器背景一致
    '.cm-editor': {
-        backgroundColor: colors.background,
+      backgroundColor: colors.background,
    },

    // 确保滚动区域背景一致
    '.cm-scroller': {
-        backgroundColor: colors.background,
+      backgroundColor: colors.background,
    },

    // 编辑器内容
    '.cm-content': {
-        caretColor: colors.cursor,
-        paddingTop: '4px',
+      caretColor: colors.cursor,
+      paddingTop: '4px',
    },

    // 光标
    '.cm-cursor, .cm-dropCursor': {
-        borderLeftColor: colors.cursor,
-        borderLeftWidth: '2px',
-        paddingTop: '4px',
-        marginTop: '-2px',
+      borderLeftColor: colors.cursor,
+      borderLeftWidth: '2px',
+      paddingTop: '4px',
+      marginTop: '-2px',
    },

    // 选择
    '.cm-selectionBackground': {
-        backgroundColor: colors.selectionBlur,
+      backgroundColor: colors.selectionBlur,
    },
    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-        backgroundColor: colors.selection,
+      backgroundColor: colors.selection,
    },
    '.cm-activeLine.code-empty-block-selected': {
-        backgroundColor: colors.selection,
+      backgroundColor: colors.selection,
    },

    // 当前行高亮
    '.cm-activeLine': {
-        backgroundColor: colors.activeLine
+      backgroundColor: colors.activeLine
    },

    // 行号区域
    '.cm-gutters': {
-        backgroundColor: 'rgba(0,0,0, 0.1)',
-        color: colors.lineNumber,
-        border: 'none',
-        padding: '0 2px 0 4px',
-        userSelect: 'none',
+      backgroundColor: 'rgba(0,0,0, 0.1)',
+      color: colors.lineNumber,
+      border: 'none',
+      padding: '0 2px 0 4px',
+      userSelect: 'none',
    },
    '.cm-activeLineGutter': {
-        backgroundColor: 'transparent',
-        color: colors.activeLineNumber,
+      backgroundColor: 'transparent',
+      color: colors.activeLineNumber,
    },

    // 折叠功能
    '.cm-foldGutter': {
-        marginLeft: '0px',
+      marginLeft: '0px',
    },
    '.cm-foldGutter .cm-gutterElement': {
-        opacity: 0,
-        transition: 'opacity 400ms',
+      opacity: 0,
+      transition: 'opacity 400ms',
    },
    '.cm-gutters:hover .cm-gutterElement': {
-        opacity: 1,
+      opacity: 1,
    },
    '.cm-foldPlaceholder': {
-        backgroundColor: 'transparent',
-        border: 'none',
-        color: '#ddd',
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: '#ddd',
    },


    // 搜索匹配
    '.cm-searchMatch': {
-        backgroundColor: 'transparent',
-        outline: `1px solid ${colors.searchMatch}`,
+      backgroundColor: 'transparent',
+      outline: `1px solid ${colors.searchMatch}`,
    },
    '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: colors.foreground,
-        color: colors.background,
+      backgroundColor: colors.foreground,
+      color: colors.background,
    },
    '.cm-selectionMatch': {
-        backgroundColor: '#50606D',
+      backgroundColor: '#50606D',
    },

    // 括号匹配
    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-        outline: `0.5px solid ${colors.searchMatch}`,
+      outline: `0.5px solid ${colors.searchMatch}`,
    },
    '&.cm-focused .cm-matchingBracket': {
-        backgroundColor: colors.matchingBracket,
-        color: 'inherit',
+      backgroundColor: colors.matchingBracket,
+      color: 'inherit',
    },
    '&.cm-focused .cm-nonmatchingBracket': {
-        outline: '0.5px solid #bc8f8f',
+      outline: '0.5px solid #bc8f8f',
    },

    // 编辑器焦点
    '&.cm-editor.cm-focused': {
-        outline: 'none',
+      outline: 'none',
    },

    // 工具提示
    '.cm-tooltip': {
-        border: 'none',
-        backgroundColor: colors.surface,
+      border: 'none',
+      backgroundColor: colors.surface,
    },
    '.cm-tooltip .cm-tooltip-arrow:before': {
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent',
    },
    '.cm-tooltip .cm-tooltip-arrow:after': {
-        borderTopColor: colors.surface,
-        borderBottomColor: colors.surface,
+      borderTopColor: colors.surface,
+      borderBottomColor: colors.surface,
    },
    '.cm-tooltip-autocomplete': {
-        '& > ul > li[aria-selected]': {
-            backgroundColor: colors.activeLine,
-            color: colors.foreground,
-        },
+      '& > ul > li[aria-selected]': {
+        backgroundColor: colors.activeLine,
+        color: colors.foreground,
+      },
    },

    // 代码块层
    '.code-blocks-layer': {
-        width: '100%',
+      width: '100%',
    },
    '.code-blocks-layer .block-even, .code-blocks-layer .block-odd': {
-        width: '100%',
-        boxSizing: 'content-box',
+      width: '100%',
+      boxSizing: 'content-box',
    },
    '.code-blocks-layer .block-even': {
-        background: colors.background,
-        borderTop: `1px solid ${colors.border}`,
+      background: colors.background,
+      borderTop: `1px solid ${colors.borderColor}`,
    },
    '.code-blocks-layer .block-even:first-child': {
-        borderTop: 'none',
+      borderTop: 'none',
    },
    '.code-blocks-layer .block-odd': {
-        background: colors.backgroundSecondary,
-        borderTop: `1px solid ${colors.border}`,
+      background: colors.backgroundSecondary,
+      borderTop: `1px solid ${colors.borderColor}`,
    },

    // 代码块开始标记
    '.code-block-start': {
-        height: '12px',
-        position: 'relative',
+      height: '12px',
+      position: 'relative',
    },
    '.code-block-start.first': {
-        height: '0px',
+      height: '0px',
    },
-}, {dark: true});
+  }, {dark: true});

-// 语法高亮样式
-const darkHighlightStyle = HighlightStyle.define([
+  // 语法高亮样式
+  const darkHighlightStyle = HighlightStyle.define([
    {tag: tags.keyword, color: colors.keyword},
    {tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], color: colors.variable},
    {tag: [tags.variableName], color: colors.variable},
@@ -229,9 +231,13 @@ const darkHighlightStyle = HighlightStyle.define([
    {tag: [tags.heading1, tags.heading2], fontSize: '1.4em'},
    {tag: [tags.heading3, tags.heading4], fontSize: '1.2em'},
    {tag: [tags.heading5, tags.heading6], fontSize: '1.1em'},
-]);
+  ]);

-export const dark = [
+  return [
    darkTheme,
    syntaxHighlighting(darkHighlightStyle),
-]; 
+  ];
+}
+
+// 默认深色主题
+export const dark = createDarkTheme(defaultDarkColors); 
--- a/frontend/src/views/editor/theme/light.ts
+++ b/frontend/src/views/editor/theme/light.ts
@@ -2,10 +2,10 @@ import { EditorView } from '@codemirror/view';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { tags } from '@lezer/highlight';

-const colors = {
+// 默认浅色主题颜色
+export const defaultLightColors = {
  // 基础色调
  background: '#ffffff',        // 主背景色
-  // backgroundAlt: '#f4f8f4',     // 交替背景色
  backgroundSecondary: '#f1faf1', // 次要背景色
  surface: '#f5f5f5',           // 面板背景
  
@@ -24,216 +24,221 @@ const colors = {
  type: '#6f42c1',             // 类型
  
  // 界面元素
-  cursor: '#000',               // 光标
-  selection: '#77baff8c',       // 选中背景
-  selectionBlur: '#b2c2ca85',   // 失焦选中背景
-  activeLine: 'rgba(0,0,0, 0.04)', // 当前行高亮
-  lineNumber: 'rgba(0,0,0, 0.25)', // 行号
-  activeLineNumber: 'rgba(0,0,0, 0.6)', // 活动行号
+  cursor: '#000000',               // 光标
+  selection: '#77baff',       // 选中背景
+  selectionBlur: '#b2c2ca',   // 失焦选中背景
+  activeLine: '#0000000a', // 当前行高亮
+  lineNumber: '#00000040', // 行号
+  activeLineNumber: '#000000aa', // 活动行号
  
  // 边框和分割线
-  border: '#dfdfdf',            // 边框色
-  borderLight: 'rgba(0,0,0, 0.05)', // 浅色边框
+  borderColor: '#dfdfdf',            // 边框色
+  borderLight: '#0000000c', // 浅色边框
  
  // 搜索和匹配
  searchMatch: '#005cc5',       // 搜索匹配
-  matchingBracket: 'rgba(0,0,0,0.1)', // 匹配括号
-
+  matchingBracket: '#00000019', // 匹配括号
 };

-const lightTheme = EditorView.theme({
-  '&': {
-    color: colors.foreground,
-    backgroundColor: colors.background,
-  },
-  
-  // 确保编辑器容器背景一致
-  '.cm-editor': {
-    backgroundColor: colors.background,
-  },
-  
-  // 确保滚动区域背景一致
-  '.cm-scroller': {
-    backgroundColor: colors.background,
-  },
-  
-  // 编辑器内容
-  '.cm-content': {
-    caretColor: colors.cursor,
-    paddingTop: '4px',
-  },
-  
-  // 光标
-  '.cm-cursor, .cm-dropCursor': { 
-    borderLeftColor: colors.cursor,
-    borderLeftWidth: '2px',
-    paddingTop: '4px',
-    marginTop: '-2px',
-  },
-  
-  // 选择
-  '.cm-selectionBackground': {
-    backgroundColor: colors.selectionBlur,
-  },
-  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    backgroundColor: colors.selection,
-  },
-  '.cm-activeLine.code-empty-block-selected': {
-    backgroundColor: colors.selection,
-  },
-  
-  // 当前行高亮
-  '.cm-activeLine': { 
-    backgroundColor: colors.activeLine 
-  },
-  
-  // 行号区域
-  '.cm-gutters': {
-    backgroundColor: 'rgba(0,0,0, 0.04)',
-    color: colors.lineNumber,
-    border: 'none',
-    borderRight: `1px solid ${colors.borderLight}`,
-    padding: '0 2px 0 4px',
-    userSelect: 'none',
-  },
-  '.cm-activeLineGutter': {
-    backgroundColor: 'transparent',
-    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-searchMatch': {
-    backgroundColor: 'transparent',
-    outline: `1px solid ${colors.searchMatch}`,
-  },
-  '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: colors.searchMatch,
-    color: colors.background,
-  },
-  '.cm-selectionMatch': {
-    backgroundColor: '#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: '0.5px solid #d73a49',
-  },
-  
-  // 编辑器焦点
-  '&.cm-editor.cm-focused': {
-    outline: 'none',
-  },
-  
-  // 工具提示
-  '.cm-tooltip': {
-    border: 'none',
-    backgroundColor: colors.surface,
-    boxShadow: '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,
+// 创建浅色主题
+export function createLightTheme(colors = defaultLightColors) {
+  const lightTheme = EditorView.theme({
+    '&': {
      color: colors.foreground,
+      backgroundColor: colors.background,
+    },
+    
+    // 确保编辑器容器背景一致
+    '.cm-editor': {
+      backgroundColor: colors.background,
+    },
+    
+    // 确保滚动区域背景一致
+    '.cm-scroller': {
+      backgroundColor: colors.background,
+    },
+    
+    // 编辑器内容
+    '.cm-content': {
+      caretColor: colors.cursor,
+      paddingTop: '4px',
+    },
+    
+    // 光标
+    '.cm-cursor, .cm-dropCursor': { 
+      borderLeftColor: colors.cursor,
+      borderLeftWidth: '2px',
+      paddingTop: '4px',
+      marginTop: '-2px',
+    },
+    
+    // 选择
+    '.cm-selectionBackground': {
+      backgroundColor: colors.selectionBlur,
+    },
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+      backgroundColor: colors.selection,
+    },
+    '.cm-activeLine.code-empty-block-selected': {
+      backgroundColor: colors.selection,
+    },
+    
+    // 当前行高亮
+    '.cm-activeLine': { 
+      backgroundColor: colors.activeLine 
+    },
+    
+    // 行号区域
+    '.cm-gutters': {
+      backgroundColor: 'rgba(0,0,0, 0.04)',
+      color: colors.lineNumber,
+      border: 'none',
+      borderRight: `1px solid ${colors.borderLight}`,
+      padding: '0 2px 0 4px',
+      userSelect: 'none',
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent',
+      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,
    },
-  },
-  
-  // 代码块层
-  '.code-blocks-layer': {
-    width: '100%',
-  },
-  '.code-blocks-layer .block-even, .code-blocks-layer .block-odd': {
-    width: '100%',
-    boxSizing: 'content-box',
-  },
-  '.code-blocks-layer .block-even': {
-    background: colors.background,
-    borderTop: `1px solid ${colors.border}`,
-  },
-  '.code-blocks-layer .block-even:first-child': {
-    borderTop: 'none',
-  },
-  '.code-blocks-layer .block-odd': {
-    background: colors.backgroundSecondary,
-    borderTop: `1px solid ${colors.border}`,
-  },
-  
-  // 代码块开始标记
-  '.code-block-start': {
-    height: '12px',
-  },
-  '.code-block-start.first': {
-    height: '0px',
-  },
-}, { dark: false });

-// 语法高亮样式
-const lightHighlightStyle = HighlightStyle.define([
-  { tag: tags.keyword, color: colors.keyword },
-  { tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], color: colors.variable },
-  { tag: [tags.variableName], color: colors.variable },
-  { tag: [tags.function(tags.variableName)], color: colors.function },
-  { tag: [tags.labelName], color: colors.operator },
-  { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: colors.keyword },
-  { tag: [tags.definition(tags.name), tags.separator], color: colors.function },
-  { tag: [tags.brace], color: colors.variable },
-  { tag: [tags.annotation], color: '#d73a49' },
-  { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: colors.number },
-  { tag: [tags.typeName, tags.className], color: colors.type },
-  { tag: [tags.operator, tags.operatorKeyword], color: colors.operator },
-  { tag: [tags.tagName], color: colors.type },
-  { tag: [tags.squareBracket], color: colors.keyword },
-  { tag: [tags.angleBracket], color: colors.operator },
-  { tag: [tags.attributeName], color: colors.variable },
-  { tag: [tags.regexp], color: colors.string },
-  { tag: [tags.quote], color: colors.comment },
-  { tag: [tags.string], color: colors.string },
-  { tag: tags.link, color: colors.function, textDecoration: 'underline' },
-  { tag: [tags.url, tags.escape, tags.special(tags.string)], color: colors.string },
-  { tag: [tags.meta], color: colors.comment },
-  { tag: [tags.comment], color: colors.comment, fontStyle: 'italic' },
-  { tag: tags.strong, fontWeight: 'bold' },
-  { tag: tags.emphasis, fontStyle: 'italic' },
-  { tag: tags.strikethrough, textDecoration: 'line-through' },
-  { tag: tags.heading, fontWeight: 'bold', color: colors.keyword },
-  { tag: [tags.heading1, tags.heading2], fontSize: '1.4em' },
-  { tag: [tags.heading3, tags.heading4], fontSize: '1.2em' },
-  { tag: [tags.heading5, tags.heading6], fontSize: '1.1em' },
-]);
+    
+    // 搜索匹配
+    '.cm-searchMatch': {
+      backgroundColor: 'transparent',
+      outline: `1px solid ${colors.searchMatch}`,
+    },
+    '.cm-searchMatch.cm-searchMatch-selected': {
+      backgroundColor: colors.searchMatch,
+      color: colors.background,
+    },
+    '.cm-selectionMatch': {
+      backgroundColor: '#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: '0.5px solid #d73a49',
+    },
+    
+    // 编辑器焦点
+    '&.cm-editor.cm-focused': {
+      outline: 'none',
+    },
+    
+    // 工具提示
+    '.cm-tooltip': {
+      border: 'none',
+      backgroundColor: colors.surface,
+      boxShadow: '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': {
+      width: '100%',
+    },
+    '.code-blocks-layer .block-even, .code-blocks-layer .block-odd': {
+      width: '100%',
+      boxSizing: 'content-box',
+    },
+    '.code-blocks-layer .block-even': {
+      background: colors.background,
+      borderTop: `1px solid ${colors.borderColor}`,
+    },
+    '.code-blocks-layer .block-even:first-child': {
+      borderTop: 'none',
+    },
+    '.code-blocks-layer .block-odd': {
+      background: colors.backgroundSecondary,
+      borderTop: `1px solid ${colors.borderColor}`,
+    },
+    
+    // 代码块开始标记
+    '.code-block-start': {
+      height: '12px',
+    },
+    '.code-block-start.first': {
+      height: '0px',
+    },
+  }, { dark: false });

-export const light = [
-  lightTheme,
-  syntaxHighlighting(lightHighlightStyle),
-]; 
+  // 语法高亮样式
+  const lightHighlightStyle = HighlightStyle.define([
+    { tag: tags.keyword, color: colors.keyword },
+    { tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], color: colors.variable },
+    { tag: [tags.variableName], color: colors.variable },
+    { tag: [tags.function(tags.variableName)], color: colors.function },
+    { tag: [tags.labelName], color: colors.operator },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: colors.keyword },
+    { tag: [tags.definition(tags.name), tags.separator], color: colors.function },
+    { tag: [tags.brace], color: colors.variable },
+    { tag: [tags.annotation], color: '#d73a49' },
+    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: colors.number },
+    { tag: [tags.typeName, tags.className], color: colors.type },
+    { tag: [tags.operator, tags.operatorKeyword], color: colors.operator },
+    { tag: [tags.tagName], color: colors.type },
+    { tag: [tags.squareBracket], color: colors.keyword },
+    { tag: [tags.angleBracket], color: colors.operator },
+    { tag: [tags.attributeName], color: colors.variable },
+    { tag: [tags.regexp], color: colors.string },
+    { tag: [tags.quote], color: colors.comment },
+    { tag: [tags.string], color: colors.string },
+    { tag: tags.link, color: colors.function, textDecoration: 'underline' },
+    { tag: [tags.url, tags.escape, tags.special(tags.string)], color: colors.string },
+    { tag: [tags.meta], color: colors.comment },
+    { tag: [tags.comment], color: colors.comment, fontStyle: 'italic' },
+    { tag: tags.strong, fontWeight: 'bold' },
+    { tag: tags.emphasis, fontStyle: 'italic' },
+    { tag: tags.strikethrough, textDecoration: 'line-through' },
+    { tag: tags.heading, fontWeight: 'bold', color: colors.keyword },
+    { tag: [tags.heading1, tags.heading2], fontSize: '1.4em' },
+    { tag: [tags.heading3, tags.heading4], fontSize: '1.2em' },
+    { tag: [tags.heading5, tags.heading6], fontSize: '1.1em' },
+  ]);
+
+  return [
+    lightTheme,
+    syntaxHighlighting(lightHighlightStyle),
+  ];
+}
+
+// 默认浅色主题
+export const light = createLightTheme(defaultLightColors); 
--- a/frontend/src/views/settings/components/SettingSection.vue
+++ b/frontend/src/views/settings/components/SettingSection.vue
@@ -6,7 +6,12 @@ defineProps<{

 <template>
  <div class="setting-section">
-    <h2 class="section-title">{{ title }}</h2>
+    <div class="section-header">
+      <h2 class="section-title">{{ title }}</h2>
+      <div class="section-title-right">
+        <slot name="title-right"></slot>
+      </div>
+    </div>
    <div class="section-content">
      <slot></slot>
    </div>
@@ -22,18 +27,29 @@ defineProps<{
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--settings-border);
  
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background-color: var(--settings-hover);
+    border-bottom: 1px solid var(--settings-border);
+  }
+  
  .section-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
-    padding: 10px 14px;
-    background-color: var(--settings-hover);
    color: var(--settings-text);
-    border-bottom: 1px solid var(--settings-border);
+  }
+  
+  .section-title-right {
+    display: flex;
+    align-items: center;
  }
  
  .section-content {
    padding: 6px 14px;
  }
 }
-</style> 
+</style>
--- a/frontend/src/views/settings/pages/AppearancePage.vue
+++ b/frontend/src/views/settings/pages/AppearancePage.vue
@@ -2,14 +2,260 @@
 import { useConfigStore } from '@/stores/configStore';
 import { useThemeStore } from '@/stores/themeStore';
 import { useI18n } from 'vue-i18n';
+import { computed, watch, onMounted, ref } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import SettingItem from '../components/SettingItem.vue';
 import { SystemThemeType, LanguageType } from '@/../bindings/voidraft/internal/models/models';
+import { defaultDarkColors } from '@/views/editor/theme/dark';
+import { defaultLightColors } from '@/views/editor/theme/light';
+import PickColors from 'vue-pick-colors';

 const { t } = useI18n();
 const configStore = useConfigStore();
 const themeStore = useThemeStore();

+// 添加临时颜色状态
+const tempColors = ref({
+  darkTheme: { ...configStore.config.appearance.customTheme?.darkTheme || defaultDarkColors },
+  lightTheme: { ...configStore.config.appearance.customTheme?.lightTheme || defaultLightColors }
+});
+
+// 标记是否有未保存的更改
+const hasUnsavedChanges = ref(false);
+
+// 重置按钮状态
+const resetButtonState = ref({
+  confirming: false,
+  timer: null as number | null
+});
+
+// 防抖函数
+const debounce = <T extends (...args: any[]) => any>(
+  func: T, 
+  wait: number
+): ((...args: Parameters<T>) => void) => {
+  let timeout: number | undefined;
+  
+  return function(...args: Parameters<T>): void {
+    clearTimeout(timeout);
+    timeout = window.setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+};
+
+// 当前激活的主题类型（基于当前系统主题）
+const activeThemeType = computed(() => {
+  const isDark = 
+    themeStore.currentTheme === SystemThemeType.SystemThemeDark || 
+    (themeStore.currentTheme === SystemThemeType.SystemThemeAuto && 
+     window.matchMedia('(prefers-color-scheme: dark)').matches);
+  
+  return isDark ? 'darkTheme' : 'lightTheme';
+});
+
+// 当前主题的颜色配置 - 使用临时状态
+const currentColors = computed(() => {
+  const themeType = activeThemeType.value;
+  return tempColors.value[themeType] || 
+    (themeType === 'darkTheme' ? defaultDarkColors : defaultLightColors);
+});
+
+// 获取当前主题模式
+const currentThemeMode = computed(() => {
+  const isDark = 
+    themeStore.currentTheme === SystemThemeType.SystemThemeDark || 
+    (themeStore.currentTheme === SystemThemeType.SystemThemeAuto && 
+     window.matchMedia('(prefers-color-scheme: dark)').matches);
+  
+  return isDark ? 'dark' : 'light';
+});
+
+// 监听配置变更，更新临时颜色
+watch(
+  () => configStore.config.appearance.customTheme,
+  (newValue) => {
+    if (!hasUnsavedChanges.value) {
+      tempColors.value = {
+        darkTheme: { ...newValue.darkTheme },
+        lightTheme: { ...newValue.lightTheme }
+      };
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 初始化时加载主题颜色
+onMounted(() => {
+  // 使用themeStore中的颜色作为初始值
+  tempColors.value = {
+    darkTheme: { ...themeStore.themeColors.darkTheme },
+    lightTheme: { ...themeStore.themeColors.lightTheme }
+  };
+});
+
+// 颜色配置分组
+const colorGroups = computed(() => [
+  {
+    key: 'basic',
+    title: t('settings.themeColors.basic'),
+    colors: [
+      { key: 'background', label: t('settings.themeColors.background') },
+      { key: 'backgroundSecondary', label: t('settings.themeColors.backgroundSecondary') },
+      { key: 'surface', label: t('settings.themeColors.surface') }
+    ]
+  },
+  {
+    key: 'text',
+    title: t('settings.themeColors.text'),
+    colors: [
+      { key: 'foreground', label: t('settings.themeColors.foreground') },
+      { key: 'foregroundSecondary', label: t('settings.themeColors.foregroundSecondary') },
+      { key: 'comment', label: t('settings.themeColors.comment') }
+    ]
+  },
+  {
+    key: 'syntax',
+    title: t('settings.themeColors.syntax'),
+    colors: [
+      { key: 'keyword', label: t('settings.themeColors.keyword') },
+      { key: 'string', label: t('settings.themeColors.string') },
+      { key: 'function', label: t('settings.themeColors.function') },
+      { key: 'number', label: t('settings.themeColors.number') },
+      { key: 'operator', label: t('settings.themeColors.operator') },
+      { key: 'variable', label: t('settings.themeColors.variable') },
+      { key: 'type', label: t('settings.themeColors.type') }
+    ]
+  },
+  {
+    key: 'interface',
+    title: t('settings.themeColors.interface'),
+    colors: [
+      { key: 'cursor', label: t('settings.themeColors.cursor') },
+      { key: 'selection', label: t('settings.themeColors.selection') },
+      { key: 'selectionBlur', label: t('settings.themeColors.selectionBlur') },
+      { key: 'activeLine', label: t('settings.themeColors.activeLine') },
+      { key: 'lineNumber', label: t('settings.themeColors.lineNumber') },
+      { key: 'activeLineNumber', label: t('settings.themeColors.activeLineNumber') }
+    ]
+  },
+  {
+    key: 'border',
+    title: t('settings.themeColors.border'),
+    colors: [
+      { key: 'borderColor', label: t('settings.themeColors.borderColor') },
+      { key: 'borderLight', label: t('settings.themeColors.borderLight') }
+    ]
+  },
+  {
+    key: 'search',
+    title: t('settings.themeColors.search'),
+    colors: [
+      { key: 'searchMatch', label: t('settings.themeColors.searchMatch') },
+      { key: 'matchingBracket', label: t('settings.themeColors.matchingBracket') }
+    ]
+  }
+]);
+
+// 处理重置按钮点击
+const handleResetClick = () => {
+  if (resetButtonState.value.confirming) {
+    // 如果已经在确认状态，执行重置操作
+    resetCurrentTheme();
+    
+    // 重置按钮状态
+    resetButtonState.value.confirming = false;
+    if (resetButtonState.value.timer !== null) {
+      clearTimeout(resetButtonState.value.timer);
+      resetButtonState.value.timer = null;
+    }
+  } else {
+    // 进入确认状态
+    resetButtonState.value.confirming = true;
+    
+    // 设置3秒后自动恢复
+    resetButtonState.value.timer = window.setTimeout(() => {
+      resetButtonState.value.confirming = false;
+      resetButtonState.value.timer = null;
+    }, 3000);
+  }
+};
+
+// 重置当前主题为默认配置
+const resetCurrentTheme = debounce(async () => {
+  // 使用themeStore的原子重置操作
+  const themeType = activeThemeType.value;
+  const success = await themeStore.resetThemeColors(themeType);
+  
+  if (success) {
+    // 更新临时颜色状态
+    tempColors.value = {
+      darkTheme: { ...themeStore.themeColors.darkTheme },
+      lightTheme: { ...themeStore.themeColors.lightTheme }
+    };
+    
+    // 标记没有未保存的更改
+    hasUnsavedChanges.value = false;
+  }
+}, 300);
+
+// 更新本地颜色配置 - 仅更新临时状态，不提交到后端
+const updateLocalColor = (colorKey: string, value: string) => {
+  const themeType = activeThemeType.value;
+  
+  // 更新临时颜色
+  tempColors.value = {
+    ...tempColors.value,
+    [themeType]: {
+      ...tempColors.value[themeType],
+      [colorKey]: value
+    }
+  };
+  
+  // 标记有未保存的更改
+  hasUnsavedChanges.value = true;
+};
+
+// 防抖包装的颜色更新函数
+const updateColor = debounce(updateLocalColor, 100);
+
+// 应用颜色更改到系统
+const applyChanges = async () => {
+  try {
+    // 获取当前主题的自定义颜色
+    const customTheme = {
+      darkTheme: tempColors.value.darkTheme,
+      lightTheme: tempColors.value.lightTheme
+    };
+    
+    // 更新themeStore中的颜色
+    themeStore.updateThemeColors(customTheme.darkTheme, customTheme.lightTheme);
+    
+    // 保存到配置
+    await themeStore.saveThemeColors();
+    
+    // 刷新编辑器主题
+    themeStore.refreshEditorTheme();
+    
+    // 清除未保存标记
+    hasUnsavedChanges.value = false;
+  } catch (error) {
+    console.error('Failed to apply theme change:', error);
+  }
+};
+
+// 取消颜色更改
+const cancelChanges = () => {
+  // 恢复到themeStore中的颜色
+  tempColors.value = {
+    darkTheme: { ...themeStore.themeColors.darkTheme },
+    lightTheme: { ...themeStore.themeColors.lightTheme }
+  };
+  
+  // 清除未保存标记
+  hasUnsavedChanges.value = false;
+};
+
 // 语言选项
 const languageOptions = [
  { value: LanguageType.LangZhCN, label: t('languages.zh-CN') },
@@ -38,6 +284,24 @@ const updateSystemTheme = async (event: Event) => {
  
  await themeStore.setTheme(selectedSystemTheme);
 };
+
+// 控制颜色选择器显示状态
+const showPickerMap = ref<Record<string, boolean>>({});
+
+// 切换颜色选择器显示状态
+const toggleColorPicker = (colorKey: string) => {
+  showPickerMap.value[colorKey] = !showPickerMap.value[colorKey];
+};
+
+// 颜色变更处理
+const handleColorChange = (colorKey: string, value: string) => {
+  updateColor(colorKey, value);
+};
+
+// 颜色选择器关闭处理
+const handlePickerClose = () => {
+  // 可以在此添加额外的逻辑
+};
 </script>

 <template>
@@ -61,6 +325,70 @@ const updateSystemTheme = async (event: Event) => {
        </select>
      </SettingItem>
    </SettingSection>
+
+    <!-- 自定义主题颜色配置 -->
+    <SettingSection :title="t('settings.customThemeColors')">
+      <template #title-right>
+        <div class="theme-controls">
+          <button 
+            v-if="!hasUnsavedChanges" 
+            :class="['reset-button', resetButtonState.confirming ? 'reset-button-confirming' : '']" 
+            @click="handleResetClick"
+          >
+            {{ resetButtonState.confirming ? t('settings.confirmReset') : t('settings.resetToDefault') }}
+          </button>
+          <template v-else>
+            <button class="apply-button" @click="applyChanges">
+              {{ t('settings.apply') }}
+            </button>
+            <button class="cancel-button" @click="cancelChanges">
+              {{ t('settings.cancel') }}
+            </button>
+          </template>
+        </div>
+      </template>
+      
+      <div class="color-groups">
+        <div v-for="group in colorGroups" :key="group.key" class="color-group">
+          <h4 class="group-title">{{ group.title }}</h4>
+          <div class="color-items">
+            <SettingItem 
+              v-for="color in group.colors" 
+              :key="color.key" 
+              :title="color.label"
+              class="color-setting-item"
+            >
+              <div class="color-input-wrapper">
+                <div class="color-picker-wrapper">
+                  <PickColors
+                    v-model:value="currentColors[color.key]"
+                    v-model:show-picker="showPickerMap[color.key]"
+                    :size="28"
+                    show-alpha
+                    :theme="currentThemeMode"
+                    :colors="[]"
+                    format="hex"
+                    :format-options="['rgb', 'hex', 'hsl', 'hsv']"
+                    placement="bottom"
+                    position="absolute"
+                    :z-index="1000"
+                    @change="(val) => handleColorChange(color.key, val)"
+                    @close-picker="handlePickerClose"
+                  />
+                </div>
+                <input 
+                  type="text" 
+                  :value="currentColors[color.key] || ''" 
+                  @input="updateColor(color.key, ($event.target as HTMLInputElement).value)"
+                  class="color-text-input"
+                  :placeholder="t('settings.colorValue')"
+                />
+              </div>
+            </SettingItem>
+          </div>
+        </div>
+      </div>
+    </SettingSection>
  </div>
 </template>

@@ -95,4 +423,146 @@ const updateSystemTheme = async (event: Event) => {
    color: var(--settings-text);
  }
 }
-</style> 
+
+// 主题控制区域
+.theme-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+// 主题颜色配置样式
+.reset-button, .apply-button, .cancel-button {
+  padding: 6px 12px;
+  font-size: 12px;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    border-color: #4a9eff;
+  }
+  
+  &:active {
+    transform: translateY(1px);
+  }
+}
+
+.reset-button {
+  background-color: var(--settings-button-bg);
+  color: var(--settings-button-text);
+  
+  &:hover {
+    background-color: var(--settings-button-hover-bg);
+  }
+  
+  &.reset-button-confirming {
+    background-color: #e74c3c;
+    color: white;
+    border-color: #c0392b;
+    
+    &:hover {
+      background-color: #c0392b;
+    }
+  }
+}
+
+.apply-button {
+  background-color: #4a9eff;
+  color: white;
+  font-weight: 500;
+  
+  &:hover {
+    background-color: #3a8eef;
+  }
+}
+
+.cancel-button {
+  background-color: var(--settings-button-bg);
+  color: var(--settings-button-text);
+  
+  &:hover {
+    background-color: var(--settings-button-hover-bg);
+  }
+}
+
+.color-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.color-group {
+  .group-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--settings-text);
+    margin: 0 0 12px 0;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--settings-input-border);
+  }
+  
+  .color-items {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 8px;
+  }
+}
+
+.color-setting-item {
+  :deep(.setting-item-content) {
+    align-items: center;
+  }
+  
+  :deep(.setting-item-title) {
+    font-size: 12px;
+    min-width: 120px;
+  }
+}
+
+.color-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+}
+
+.color-picker-wrapper {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  cursor: pointer;
+  
+  :deep(.pick-colors-trigger) {
+    border: 1px solid var(--settings-input-border);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+}
+
+.color-text-input {
+  flex: 1;
+  min-width: 160px;
+  padding: 4px 8px;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 4px;
+  background-color: var(--settings-input-bg);
+  color: var(--settings-text);
+  font-size: 11px;
+  font-family: 'Courier New', monospace;
+  transition: border-color 0.2s ease;
+  height: 28px;
+  box-sizing: border-box;
+  
+  &:focus {
+    outline: none;
+    border-color: #4a9eff;
+  }
+  
+  &::placeholder {
+    color: var(--settings-text-secondary);
+  }
+}
+</style>
--- a/internal/models/config.go
+++ b/internal/models/config.go
@@ -101,8 +101,9 @@ type EditingConfig struct {

 // AppearanceConfig 外观设置配置
 type AppearanceConfig struct {
-	Language    LanguageType    `json:"language"`    // 界面语言
-	SystemTheme SystemThemeType `json:"systemTheme"` // 系统界面主题
+	Language    LanguageType      `json:"language"`    // 界面语言
+	SystemTheme SystemThemeType   `json:"systemTheme"` // 系统界面主题
+	CustomTheme CustomThemeConfig `json:"customTheme"` // 自定义主题配置
 }

 // UpdatesConfig 更新设置配置
@@ -164,11 +165,12 @@ func NewDefaultAppConfig() *AppConfig {
 			TabSize:         4,
 			TabType:         TabTypeTab,
 			// 保存选项
-			AutoSaveDelay: 2000, // 2秒后自动保存
+			AutoSaveDelay: 2000,
 		},
 		Appearance: AppearanceConfig{
 			Language:    LangEnUS,
-			SystemTheme: SystemThemeAuto, // 默认使用深色系统主题
+			SystemTheme: SystemThemeAuto,
+			CustomTheme: *NewDefaultCustomThemeConfig(),
 		},
 		Updates: UpdatesConfig{
 			Version:            "1.0.0",
--- a/internal/models/theme.go
+++ b/internal/models/theme.go
@@ -0,0 +1,127 @@
+package models
+
+// ThemeColorConfig 主题颜色配置
+type ThemeColorConfig struct {
+	// 基础色调
+	Background          string `json:"background"`          // 主背景色
+	BackgroundSecondary string `json:"backgroundSecondary"` // 次要背景色
+	Surface             string `json:"surface"`             // 面板背景
+	Foreground          string `json:"foreground"`          // 主文本色
+	ForegroundSecondary string `json:"foregroundSecondary"` // 次要文本色
+
+	// 语法高亮
+	Comment  string `json:"comment"`  // 注释色
+	Keyword  string `json:"keyword"`  // 关键字
+	String   string `json:"string"`   // 字符串
+	Function string `json:"function"` // 函数名
+	Number   string `json:"number"`   // 数字
+	Operator string `json:"operator"` // 操作符
+	Variable string `json:"variable"` // 变量
+	Type     string `json:"type"`     // 类型
+
+	// 界面元素
+	Cursor           string `json:"cursor"`           // 光标
+	Selection        string `json:"selection"`        // 选中背景
+	SelectionBlur    string `json:"selectionBlur"`    // 失焦选中背景
+	ActiveLine       string `json:"activeLine"`       // 当前行高亮
+	LineNumber       string `json:"lineNumber"`       // 行号
+	ActiveLineNumber string `json:"activeLineNumber"` // 活动行号
+
+	// 边框分割线
+	BorderColor string `json:"borderColor"` // 边框色
+	BorderLight string `json:"borderLight"` // 浅色边框
+
+	// 搜索匹配
+	SearchMatch     string `json:"searchMatch"`     // 搜索匹配
+	MatchingBracket string `json:"matchingBracket"` // 匹配括号
+}
+
+// CustomThemeConfig 自定义主题配置
+type CustomThemeConfig struct {
+	DarkTheme  ThemeColorConfig `json:"darkTheme"`  // 深色主题配置
+	LightTheme ThemeColorConfig `json:"lightTheme"` // 浅色主题配置
+}
+
+// NewDefaultDarkTheme 创建默认深色主题配置
+func NewDefaultDarkTheme() ThemeColorConfig {
+	return ThemeColorConfig{
+		// 基础色调
+		Background:          "#252B37",
+		BackgroundSecondary: "#213644",
+		Surface:             "#474747",
+		Foreground:          "#9BB586",
+		ForegroundSecondary: "#9c9c9c",
+
+		// 语法高亮
+		Comment:  "#6272a4",
+		Keyword:  "#ff79c6",
+		String:   "#f1fa8c",
+		Function: "#50fa7b",
+		Number:   "#bd93f9",
+		Operator: "#ff79c6",
+		Variable: "#8fbcbb",
+		Type:     "#8be9fd",
+
+		// 界面元素
+		Cursor:           "#ffffff",
+		Selection:        "#0865a9",
+		SelectionBlur:    "#225377",
+		ActiveLine:       "#ffffff",
+		LineNumber:       "#ffffff",
+		ActiveLineNumber: "#ffffff",
+
+		// 边框分割线
+		BorderColor: "#1e222a",
+		BorderLight: "#ffffff1a",
+
+		// 搜索匹配
+		SearchMatch:     "#8fbcbb",
+		MatchingBracket: "#ffffff1a",
+	}
+}
+
+// NewDefaultLightTheme 创建默认浅色主题配置
+func NewDefaultLightTheme() ThemeColorConfig {
+	return ThemeColorConfig{
+		// 基础色调
+		Background:          "#ffffff",
+		BackgroundSecondary: "#f1faf1",
+		Surface:             "#f5f5f5",
+		Foreground:          "#444d56",
+		ForegroundSecondary: "#6a737d",
+
+		// 语法高亮
+		Comment:  "#6a737d",
+		Keyword:  "#d73a49",
+		String:   "#032f62",
+		Function: "#005cc5",
+		Number:   "#005cc5",
+		Operator: "#d73a49",
+		Variable: "#24292e",
+		Type:     "#6f42c1",
+
+		// 界面元素
+		Cursor:           "#000000",
+		Selection:        "#77baff",
+		SelectionBlur:    "#b2c2ca",
+		ActiveLine:       "#000000",
+		LineNumber:       "#000000",
+		ActiveLineNumber: "#000000",
+
+		// 边框分割线
+		BorderColor: "#dfdfdf",
+		BorderLight: "#0000000d",
+
+		// 搜索匹配
+		SearchMatch:     "#005cc5",
+		MatchingBracket: "#0000001a",
+	}
+}
+
+// NewDefaultCustomThemeConfig 创建默认自定义主题配置
+func NewDefaultCustomThemeConfig() *CustomThemeConfig {
+	return &CustomThemeConfig{
+		DarkTheme:  NewDefaultDarkTheme(),
+		LightTheme: NewDefaultLightTheme(),
+	}
+}
--- a/internal/services/config_migration_service.go
+++ b/internal/services/config_migration_service.go
@@ -19,7 +19,7 @@ import (

 const (
 	// CurrentAppConfigVersion 当前应用配置版本
-	CurrentAppConfigVersion = "1.0.0"
+	CurrentAppConfigVersion = "1.2.0"
 	// BackupFilePattern 备份文件名模式
 	BackupFilePattern = "%s.backup.%s.json"