phase 0

web/app/composables/useTheme.ts

@@ -0,0 +1,36 @@
+export type Theme = 'light' | 'dark'
+
+// ต้องตรงกับ inline script กัน FOUC ใน nuxt.config.ts
+const STORAGE_KEY = 'theme-preference'
+
+export function useTheme() {
+  const theme = useState<Theme>('theme', () => 'light')
+  const isDark = computed(() => theme.value === 'dark')
+
+  function apply(next: Theme) {
+    theme.value = next
+    if (import.meta.client) {
+      document.documentElement.classList.toggle('dark', next === 'dark')
+      // ข้อยกเว้นเดียวที่ localStorage อนุญาต: theme preference ไม่ใช่ credential (กติกา #4)
+      localStorage.setItem(STORAGE_KEY, next)
+    }
+  }
+
+  /** Sync state กับที่ inline script ตั้งไว้ตอนโหลดหน้า (client เท่านั้น) */
+  function initTheme() {
+    if (!import.meta.client) return
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored === 'light' || stored === 'dark') {
+      theme.value = stored
+    } else {
+      theme.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+    document.documentElement.classList.toggle('dark', theme.value === 'dark')
+  }
+
+  function toggle() {
+    apply(theme.value === 'dark' ? 'light' : 'dark')
+  }
+
+  return { theme, isDark, initTheme, toggle }
+}