✨ Complete the custom editor theme

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