Archipelago — open-source initial import

aiui/packages/app/src/composables/useTheme.ts

@@ -0,0 +1,33 @@
+import { ref, computed } from 'vue'
+
+type ThemeName = 'dark' | 'light'
+
+const currentTheme = ref<ThemeName>('dark')
+
+export function useTheme() {
+  const isDark = computed(() => currentTheme.value === 'dark')
+
+  const setTheme = (theme: ThemeName) => {
+    currentTheme.value = theme
+    localStorage.setItem('aiui-theme', theme)
+    document.documentElement.classList.toggle('dark', theme === 'dark')
+    document.documentElement.classList.toggle('light', theme === 'light')
+  }
+
+  const toggleTheme = () => {
+    setTheme(isDark.value ? 'light' : 'dark')
+  }
+
+  const initTheme = () => {
+    const saved = localStorage.getItem('aiui-theme') as ThemeName | null
+    if (saved) {
+      setTheme(saved)
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setTheme('dark')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  return { currentTheme, isDark, setTheme, toggleTheme, initTheme }
+}