PWA

src/components/theme-provider/index.ts

@@ -0,0 +1,53 @@
+import { computed, onMounted, ref, watch } from 'vue'
+
+type Theme = 'dark' | 'light' | 'system'
+
+const useTheme = () => {
+  const theme = ref<Theme>('dark')
+  const systemTheme = ref<'dark' | 'light'>('light')
+
+  const updateSystemTheme = () => {
+    systemTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const currentTheme = computed(() => {
+    return theme.value === 'system' ? systemTheme.value : theme.value
+  })
+
+  const applyTheme = () => {
+    if (currentTheme.value === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  onMounted(() => {
+    const stored = localStorage.getItem('ui-theme')
+    if (stored && (stored === 'dark' || stored === 'light' || stored === 'system')) {
+      theme.value = stored as Theme
+    }
+    
+    updateSystemTheme()
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateSystemTheme)
+    applyTheme()
+  })
+
+  watch(currentTheme, () => {
+    applyTheme()
+  })
+
+  const setTheme = (newTheme: Theme) => {
+    theme.value = newTheme
+    localStorage.setItem('ui-theme', newTheme)
+  }
+
+  return {
+    theme,
+    setTheme,
+    systemTheme,
+    currentTheme
+  }
+}
+
+export { useTheme }