修复主题颜色与字体问题

app/composables/useTheme.ts

@@ -119,25 +119,6 @@ let isInitialized = false
 export function useTheme() {
   const colorMode = useColorMode()
 
-  const initializeTheme = () => {
-    if (import.meta.client && !isInitialized) {
-      selectedTheme.value = localStorage.getItem('app-theme') || defaultSettings.theme
-      selectedFont.value = localStorage.getItem('app-font') || defaultSettings.font
-      selectedFontSize.value = localStorage.getItem('app-font-size') || defaultSettings.fontSize
-      selectedThemeColor.value = localStorage.getItem('app-theme-color') || defaultSettings.themeColor
-      selectedCodeTheme.value = localStorage.getItem('app-code-theme') || defaultSettings.codeTheme
-      selectedCaptionFormat.value = localStorage.getItem('app-caption-format') || defaultSettings.captionFormat
-
-      // 找到自定义颜色对应的主题色值
-      const initialColor = themeColors.find(c => c.value === selectedThemeColor.value)?.color || '#3B82F6'
-      customColor.value = localStorage.getItem('app-custom-color') || initialColor
-
-      applyThemeVariables()
-      isInitialized = true
-      console.log('主题已初始化')
-    }
-  }
-
   const applyThemeVariables = () => {
     if (import.meta.client) {
       const root = document.documentElement
@@ -165,6 +146,12 @@ export function useTheme() {
           if (!appConfig.ui.colors) appConfig.ui.colors = {}
           appConfig.ui.colors.primary = mappedColor
         }
+      } else {
+        // 处理自定义颜色
+        root.style.setProperty('--ui-primary', customColor.value)
+        const appConfig = useAppConfig()
+        if (!appConfig.ui.colors) appConfig.ui.colors = {}
+        appConfig.ui.colors.primary = 'blue'
       }
 
       // 字体设置保持不变
@@ -179,9 +166,6 @@ export function useTheme() {
         xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem'
       }
       root.style.setProperty('--font-size-base', fontSizeMapping[selectedFontSize.value as keyof typeof fontSizeMapping])
-
-      root.classList.remove('theme-classic', 'theme-elegant', 'theme-minimal')
-      root.classList.add(`theme-${selectedTheme.value}`)
     }
   }
 
@@ -206,9 +190,54 @@ export function useTheme() {
       const appConfig = useAppConfig()
       if (!appConfig.ui.colors) appConfig.ui.colors = {}
       appConfig.ui.colors.primary = 'blue' // 使用有效的颜色名称作为基础
+
+      // 保存到localStorage
+      localStorage.setItem('app-theme-color', 'custom')
+      localStorage.setItem('app-custom-color', customColor.value)
     }
   }
 
+  const initializeTheme = () => {
+    if (import.meta.client && !isInitialized) {
+      // 从localStorage读取设置
+      selectedTheme.value = localStorage.getItem('app-theme') || defaultSettings.theme
+      selectedFont.value = localStorage.getItem('app-font') || defaultSettings.font
+      selectedFontSize.value = localStorage.getItem('app-font-size') || defaultSettings.fontSize
+      selectedThemeColor.value = localStorage.getItem('app-theme-color') || defaultSettings.themeColor
+      selectedCodeTheme.value = localStorage.getItem('app-code-theme') || defaultSettings.codeTheme
+      selectedCaptionFormat.value = localStorage.getItem('app-caption-format') || defaultSettings.captionFormat
+
+      // 找到自定义颜色对应的主题色值
+      const initialColor = themeColors.find(c => c.value === selectedThemeColor.value)?.color || '#3B82F6'
+      customColor.value = localStorage.getItem('app-custom-color') || initialColor
+
+      // 立即应用主题设置
+      applyThemeVariables()
+
+      // 如果是自定义颜色，需要特殊处理
+      if (selectedThemeColor.value === 'custom') {
+        applyCustomColor()
+      }
+
+      isInitialized = true
+      console.log('主题已初始化')
+    }
+  }
+
+  // 确保在客户端时立即初始化
+  if (import.meta.client) {
+    // 立即初始化，避免闪烁
+    initializeTheme()
+
+    // 确保在DOM准备好后再次应用
+    onMounted(() => {
+      applyThemeVariables()
+      if (selectedThemeColor.value === 'custom') {
+        applyCustomColor()
+      }
+    })
+  }
+
   const resetSettings = () => {
     selectedTheme.value = defaultSettings.theme
     selectedFont.value = defaultSettings.font