fix some bugs

src/stores/theme.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { computed, watchEffect } from 'vue'
+import { usePreferredDark, useStorage } from '@vueuse/core'
+
+export type ThemePreference = 'light' | 'dark' | 'system'
+
+export const useThemeStore = defineStore('theme', () => {
+  const preference = useStorage<ThemePreference>('ft_theme', 'system')
+  const prefersDark = usePreferredDark()
+
+  const resolved = computed<'light' | 'dark'>(() => {
+    if (preference.value === 'system') return prefersDark.value ? 'dark' : 'light'
+    return preference.value
+  })
+
+  const isDark = computed(() => resolved.value === 'dark')
+
+  watchEffect(() => {
+    const root = document.documentElement
+    root.classList.toggle('dark', isDark.value)
+    root.style.colorScheme = resolved.value
+  })
+
+  function setPreference(value: ThemePreference) {
+    preference.value = value
+  }
+
+  return {
+    preference,
+    resolved,
+    isDark,
+    setPreference,
+  }
+})