feat: Implement initial UI design system, theming, and classroom learning page.

Frontend-Learner/plugins/theme.client.ts

@@ -1,10 +1,21 @@
-export default defineNuxtPlugin(() => {
-  // Client-side only theme initialization to prevent flash of wrong theme
+export default defineNuxtPlugin((nuxtApp) => {
+  const { $q } = useQuasar()
+
+  // ฟังก์ชันสลับโหมดและ Sync กับ Quasar
+  const updateTheme = (isDark: boolean) => {
+    if (isDark) {
+      document.documentElement.classList.add('dark')
+      if ($q) $q.dark.set(true)
+    } else {
+      document.documentElement.classList.remove('dark')
+      if ($q) $q.dark.set(false)
+    }
+  }
+
+  // ตอนเริ่มทำงานบน Client
   if (process.client) {
-    const saved = localStorage.getItem('theme')
-    const isDark = saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    const savedTheme = localStorage.getItem('theme')
+    const isDark = savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
     
-    // Apply class immediately for Tailwind
-    document.documentElement.classList.toggle('dark', isDark)
   }
 })