修复主题颜色与字体问题

app/app.vue

@@ -7,7 +7,7 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })
 
 // 获取主题系统
-const { selectedTheme, selectedFont } = useTheme()
+const { selectedTheme, selectedFont, selectedFontSize } = useTheme()
 
 // 计算根元素的 CSS 类
 const rootClasses = computed(() => {
@@ -19,8 +19,8 @@ const rootClasses = computed(() => {
   // 添加字体类
   classes.push(`font-${selectedFont.value}`)
 
-  // 移除字号类，让它在具体组件中处理
+  // 添加字体大小类
-  // classes.push(`text-${selectedFontSize.value}`)
+  classes.push(`text-${selectedFontSize.value}`)
 
   return classes.join(' ')
 })

app/components/example/ExampleFulltextFusejs.vue

@@ -11,7 +11,7 @@ const fuse = new Fuse(data.value || [], {
   ]
 })
 
-const result = computed<Array<{ item: { id: string; title: string; titles: string[]; level: number; content: string } }>>(() => 
+const result = computed<Array<{ item: { id: string, title: string, titles: string[], level: number, content: string } }>>(() =>
   fuse.search(toValue(query)).slice(0, 10)
 )
 </script>

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

app/plugins/theme.client.ts

@@ -0,0 +1,8 @@
+export default defineNuxtPlugin(() => {
+  const { initializeTheme } = useTheme()
+
+  // 在客户端初始化主题
+  if (import.meta.client) {
+    initializeTheme()
+  }
+})