工具完成

src/composables/useTheme.ts

@@ -0,0 +1,55 @@
+import { ref, watch } from 'vue'
+
+type Theme = 'light' | 'dark'
+
+// 全局主题状态
+const currentTheme = ref<Theme>('dark')
+
+export const useTheme = () => {
+  // 切换主题
+  const toggleTheme = () => {
+    currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'
+  }
+  
+  // 设置主题
+  const setTheme = (theme: Theme) => {
+    currentTheme.value = theme
+  }
+  
+  // 从本地存储恢复主题
+  const restoreTheme = () => {
+    const saved = localStorage.getItem('preferred-theme') as Theme
+    if (saved && (saved === 'light' || saved === 'dark')) {
+      currentTheme.value = saved
+    } else {
+      // 检测系统主题偏好
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      currentTheme.value = prefersDark ? 'dark' : 'light'
+    }
+  }
+  
+  // 应用主题到DOM
+  const applyTheme = (theme: Theme) => {
+    const root = document.documentElement
+    root.setAttribute('data-theme', theme)
+    if (theme === 'dark') {
+      root.classList.add('dark')
+    } else {
+      root.classList.remove('dark')
+    }
+  }
+  
+  // 监听主题变化
+  watch(currentTheme, (newTheme) => {
+    applyTheme(newTheme)
+    localStorage.setItem('preferred-theme', newTheme)
+  }, { immediate: true })
+  
+  return {
+    theme: currentTheme,
+    toggleTheme,
+    setTheme,
+    restoreTheme,
+    applyTheme
+  }
+}