feat: Add foundational UI components, pages, and theme management for the e-learning application.

Frontend-Learner/plugins/theme.client.ts

@@ -1,5 +1,8 @@
 export default defineNuxtPlugin((nuxtApp) => {
-  const { $q } = useQuasar()
+  const nuxt = useNuxtApp()
+  const $q = nuxt.vueApp.config.globalProperties.$q
+
+
 
   // ฟังก์ชันสลับโหมดและ Sync กับ Quasar
   const updateTheme = (isDark: boolean) => {
@@ -14,8 +17,12 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   // ตอนเริ่มทำงานบน Client
   if (process.client) {
+    const { set } = useThemeMode()
     const savedTheme = localStorage.getItem('theme')
     const isDark = savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
     
+    set(isDark)
+    // Also explicitly force updateTheme initially since watcher might not fire if state matches default
+    updateTheme(isDark)
   }
 })