initial

src/composables/useTheme.ts

@@ -0,0 +1,31 @@
+import { ref, watch } from 'vue'
+
+const STORAGE_KEY = 'mws_theme'
+const DARK_CLASS = 'app-dark'
+
+const isDark = ref(loadInitial())
+
+function loadInitial(): boolean {
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored === 'dark') return true
+  if (stored === 'light') return false
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+function apply(value: boolean) {
+  document.documentElement.classList.toggle(DARK_CLASS, value)
+}
+
+apply(isDark.value)
+
+watch(isDark, (value) => {
+  apply(value)
+  localStorage.setItem(STORAGE_KEY, value ? 'dark' : 'light')
+})
+
+export function useTheme() {
+  function toggle() {
+    isDark.value = !isDark.value
+  }
+  return { isDark, toggle }
+}