优化前端

frontend/src/composables/useTheme.ts

@@ -0,0 +1,29 @@
+import { ref, watch, onMounted } from 'vue'
+
+export type Theme = 'dark' | 'light'
+
+const theme = ref<Theme>('dark')
+
+export function useTheme() {
+  const applyTheme = (t: Theme) => {
+    theme.value = t
+    document.body.dataset.theme = t
+    localStorage.setItem('uiTheme', t)
+  }
+
+  const toggleTheme = () => {
+    applyTheme(theme.value === 'light' ? 'dark' : 'light')
+  }
+
+  const initTheme = () => {
+    const saved = localStorage.getItem('uiTheme') as Theme | null
+    const prefersLight = window.matchMedia?.('(prefers-color-scheme: light)').matches
+    applyTheme(saved || (prefersLight ? 'light' : 'dark'))
+  }
+
+  return {
+    theme,
+    toggleTheme,
+    initTheme
+  }
+}