chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

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

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 14:03:56 +07:00
parent a2ce1d79a2
commit 0e095b35c5
4 changed files with 79 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

37
Frontend-Learner/components/user/UserMenu.vue
View file

@ -12,36 +12,13 @@ const { currentUser, logout } = useAuth()
const { t } = useI18n()
const $q = useQuasar()
const isDarkMode = ref(false)
// Use centralized theme management
const { isDark, set } = useThemeMode()
const isHydrated = ref(false)
const applyTheme = (value: boolean) => {
// Tailwind dark mode
document.documentElement.classList.toggle('dark', value)
// Quasar dark mode
$q.dark.set(value)
// persist
localStorage.setItem('theme', value ? 'dark' : 'light')
}
const toggleDarkMode = (val: boolean) => {
isDarkMode.value = val
applyTheme(val)
}
// Sync Dark Mode state on mount
onMounted(() => {
isHydrated.value = true
const savedTheme = localStorage.getItem('theme')
const preferredDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false
isDarkMode.value = savedTheme
? savedTheme === 'dark'
: preferredDark
applyTheme(isDarkMode.value)
})
// User Initials
@ -88,19 +65,19 @@ const handleLogout = async () => {
class="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors"
>
<q-item-section>
<q-item-label class="font-bold text-sm">{{ item.label }}</q-item-label>
<q-item-label class="font-bold text-sm text-slate-800 dark:text-white">{{ item.label }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
<q-item-section>
<q-item-label class="font-bold text-sm">{{ $t('userMenu.darkMode') }}</q-item-label>
<q-item-label class="font-bold text-sm text-slate-800 dark:text-white">{{ $t('userMenu.darkMode') }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-toggle
v-if="isHydrated"
:model-value="isDarkMode"
@update:model-value="toggleDarkMode"
:model-value="isDark"
@update:model-value="set"
color="blue"
keep-color
/>