feat: Establish core application layout, global styles, and theme mode management.

Frontend-Learner/composables/useThemeMode.ts

@@ -0,0 +1,39 @@
+import { useQuasar } from 'quasar'
+
+export const useThemeMode = () => {
+  const $q = useQuasar()
+
+  // deterministic on SSR: default = light
+  const isDark = useState<boolean>('theme:isDark', () => false)
+
+  const applyTheme = (value: boolean) => {
+    if (!process.client) return
+    document.documentElement.classList.toggle('dark', value)
+    $q.dark.set(value)
+    localStorage.setItem('theme', value ? 'dark' : 'light')
+  }
+
+  const initTheme = () => {
+    if (!process.client) return
+    const saved = localStorage.getItem('theme') // 'dark' | 'light' | null
+    const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false
+
+    const value = saved ? saved === 'dark' : prefersDark
+    isDark.value = value
+    applyTheme(value)
+  }
+
+  onMounted(initTheme)
+
+  watch(isDark, (v) => applyTheme(v))
+
+  const toggle = () => {
+    isDark.value = !isDark.value
+  }
+
+  const set = (v: boolean) => {
+    isDark.value = v
+  }
+
+  return { isDark, toggle, set }
+}