fix: persist dark mode across refresh
This commit is contained in:
parent
5d6cab229f
commit
73a4ea6562
2 changed files with 11 additions and 1 deletions
|
|
@ -3,11 +3,19 @@
|
||||||
const { fetchUserProfile, isAuthenticated } = useAuth()
|
const { fetchUserProfile, isAuthenticated } = useAuth()
|
||||||
|
|
||||||
// เมื่อ App เริ่มทำงาน (Mounted)
|
// เมื่อ App เริ่มทำงาน (Mounted)
|
||||||
// หากผู้ใช้ Login ค้างไว้ (มี Token) ให้ดึงข้อมูล Profile ล่าสุดทันที
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
// 1. หากผู้ใช้ Login ค้างไว้ (มี Token) ให้ดึงข้อมูล Profile ล่าสุดทันที
|
||||||
if (isAuthenticated.value) {
|
if (isAuthenticated.value) {
|
||||||
fetchUserProfile()
|
fetchUserProfile()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 2. ตรวจสอบและคืนค่า Theme (Dark/Light) จาก LocalStorage
|
||||||
|
const savedTheme = localStorage.getItem('theme')
|
||||||
|
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||||
|
document.documentElement.classList.add('dark')
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -67,8 +67,10 @@ const toggleDarkMode = () => {
|
||||||
isDarkMode.value = !isDarkMode.value
|
isDarkMode.value = !isDarkMode.value
|
||||||
if (isDarkMode.value) {
|
if (isDarkMode.value) {
|
||||||
document.documentElement.classList.add('dark')
|
document.documentElement.classList.add('dark')
|
||||||
|
localStorage.setItem('theme', 'dark')
|
||||||
} else {
|
} else {
|
||||||
document.documentElement.classList.remove('dark')
|
document.documentElement.classList.remove('dark')
|
||||||
|
localStorage.setItem('theme', 'light')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue